2
你會如何創建一個如下的部分:?我該如何去製作CSS中的圓錐形部分邊框?
見藿旗幟具有爲錐形的邊界,現在earlir當我有需要類似的東西我都試過,用的東西的工作就像如下:
<div>
</div>
CSS:
body {
padding: 0;
margin: 0;
}
div {
height: 50px;
background: #fff;
box-shadow: 2px 0 5px rgba(0,0,0,.3);
position: relative;
}
div:after {
content: '';
position: absolute;
bottom: 0;
left: 0;
height: 120px;
right: 20px;
-webkit-transform: rotate(20deg);
-ms-transform: rotateX(20deg);
-o-transform: rotateX(20deg);
transform: rotateZ(-5deg);
z-index: -1;
background: red;
}
但爲圓錐形需要存在於所有寬度的我不知道,如果使用相同的伎倆將是在這種情況良好d所有設備的設計都必須相同。
那麼我該如何去製作CSS中的圓錐形部分邊框?
我建議使用SVG('path'或'clipPath'或'mask')。你會從這得到一些想法 - http://stackoverflow.com/questions/35443763/how-to-accomplish-this-shape-with-angled-cuts-at-the-bottom-and-an-image-backgro/ 35449133#35449133(它只有一面切)。 – Harry
你見過這個嗎? https://css-tricks.com/snippets/css/css-triangle/使用該技術,您可以定位這些三角形,以覆蓋傳統的矩形內容區域。您可以簡單地使用「媒體查詢」爲各種視口創建自定義大小。 –
@哈利感謝讓我通過它:) –