我想知道如何在 css 中制作此頂部邊框以及如何呼叫它，因為我不知道。
我嘗試弄亂 ::before 和 ::after ，但它看起來不太好。
.container {
margin-top: 50px;
background: grey;
width: 60%;
height: 300px;
border-radius: 10px;
position: relative;
}
.container:after {
content: '';
background: red;
width: 50%;
height: 100%;
position: absolute;
border-top-right-radius: 15px;
transform: rotate(-3deg);
}<div class="container"></div>uj5u.com熱心網友回復：
您可以使用clip-path和polygon在頂部創建三角形。明智地使用left和width財產，這樣你就看不到 traingle 的左右部分。
請參閱下面的片段：
.container {
margin-top: 50px;
background: #FFCC00;
width: 60%;
height: 300px;
border-radius: 10px;
position: relative;
}
.container:before{
content: '';
position: absolute;
display: block;
left: 2.5%;
top: -20px;
bottom: 0;
width: 95%;
height: 20px;
background: #FFCC00;
-webkit-clip-path: polygon(50% 30%, 0 100%, 100% 100%);
clip-path: polygon(50% 30%, 0 100%, 100% 100%);
}<div class="container"></div>uj5u.com熱心網友回復：
你有兩種方法可以做到
你可以在這里學習如何制作三角形 https://www.w3schools.com/howto/howto_css_shapes.asp
uj5u.com熱心網友回復：
我能夠使用剪輯路徑來制作它。這是我使用過的工具：https : //bennettfeely.com/clippy/
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/384475.html
上一篇：html和css影像大小問題