純CSS Angled / Rounded標簽

Question

我加入了一張圖片，因為我無法完全用文字描述它。 但基本上我希望以最好的方式實現這種形式的“標簽”。

我知道之前有過這方面的問題，使用一些新的css3技巧將片段旋轉到位，但我從來沒有見過這樣的東西。 在目前呈現藍綠色的背后，最有可能出現圖像。 紅線代表頁面上的內容。

我過去使用.png文件中的那個小彎曲位完成了這個，但我討厭這樣做。

我也看到了這一點：

如何使用css制作這樣的斜角標簽？

但這並不是我想要的，但如果有類似的解決方案，我會對此持開放態度。 我還需要一種方法讓div繼續到屏幕的最右邊緣，同時仍然保持標簽的左側部分固定到位。

來自@ chipChocolate.py的解決方案

我使用了芯片上的解決方案，但交換了它，以便選項卡是svg元素：

 <svg viewBox="0 0 960 70" preserveAspectRatio="none"> <path fill="#008882" d="M0,61c0,0,141,0,215.5,0C294,61,358,0.3,423.5,0.3c35,0,536.5,0,536.5,0v69.5H0V61z"/> </svg> 

交換顏色，以便您可以在這里看到它。

Answer 1

“我正在尋求以最佳方式實現這種“標簽”形狀” -使用svg 。

 <svg width="100%" height="84" viewBox="0 0 700 84" preserveAspectRatio="none"> <path d="M0,0 h700 v30 h-280 c-60,0 -60,15 -100,30 c-10,4 -15,5 -35,6 h-285" fill="#008882" /> </svg> 

Answer 2

我首先嘗試使用漸變技巧，盡管我沒有添加其他元素就沒有進一步的能力：

 .top{ height:100px; width:100%; background:lightblue; position:relative; } .top:after{ content:""; position:absolute; width:50%; height:20px; background:lightblue; bottom:-20px; border-radius: 0 0 50% 0; } .top:before{ content:""; position:absolute; background:red; height:20px; width:20px; left:50%; bottom:-20px; background: -moz-radial-gradient(center, ellipse cover, rgba(125,185,232,0.01) 49%, rgba(125,185,232,1) 50%, rgba(125,185,232,1) 100%); /* FF3.6+ */ background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(49%,rgba(125,185,232,0.01)), color-stop(50%,rgba(125,185,232,1)), color-stop(100%,rgba(125,185,232,1))); /* Chrome,Safari4+ */ background: -webkit-radial-gradient(center, ellipse cover, rgba(125,185,232,0.01) 49%,rgba(125,185,232,1) 50%,rgba(125,185,232,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-radial-gradient(center, ellipse cover, rgba(125,185,232,0.01) 49%,rgba(125,185,232,1) 50%,rgba(125,185,232,1) 100%); /* Opera 12+ */ background: -ms-radial-gradient(center, ellipse cover, rgba(125,185,232,0.01) 49%,rgba(125,185,232,1) 50%,rgba(125,185,232,1) 100%); /* IE10+ */ background: radial-gradient(ellipse at center, rgba(125,185,232,0.01) 49%,rgba(125,185,232,1) 50%,rgba(125,185,232,1) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#037db9e8', endColorstr='#7db9e8',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ } 

 <div class="top"></div> 

但是 ，如果您要包含“塊顏色”背景，這將起作用（不會失去其形狀）：

 .top{ height:100px; width:100%; background:#008882; position:relative; } .top:after{ content:""; position:absolute; width:50%; height:20px; background:#008882; bottom:-15px; border-radius: 0 0 50px 0; } .top:before{ content:""; position:absolute; background:white; height:20px; width:50%; left:50%; bottom:-5px; border-radius: 50px 0 0 0; } 

 <div class="top"></div>