我试图用纯 CSS 创建以下黄金分界线。
我正在尝试使用 transform:scale;
CSS 创建它 到目前为止,我发现了以下内容:
.border_angle {
border: 50vw solid transparent;
width: 0;
height: 0;
border-bottom-color: transparent;
border-left-color: transparent;
border-top-color: transparent;
transform: scaleY(0.105) translateY(-50%);
-webkit-transform: scaleY(0.105) translateY(-50%);
-o-transform: scaleY(0.105) translateY(-50%);
-moz-transform: scaleY(0.105) translateY(-50%);
-ms-transform: scaleY(0.105) translateY(-50%);
position: absolute;
transform-origin: top center;
top: 0;
left: 0;
right: 0;
z-index: 11;
}
.border_angle_gold_l {
border-left-color: #BE955A;
}
.border_angle_gold-light_r {
border-right-color: #CCA56B;
}
<div style="margin-top: 200px;" class="border_angle border_angle_gold_l border_angle_gold-light_r"></div>
基本上,我几乎已经掌握了,但我只需要反转三 Angular 形!!我不知道如何...任何帮助将不胜感激。
最佳答案
我会用更少的代码和linear-gradient
来做不同的事情:
.triangle {
margin-top:100px;
height:80px;
background-image:
linear-gradient(to bottom right, transparent 50%,#BE955A 51%),
linear-gradient(to top right, transparent 50%,#BE955A 51%),
linear-gradient(to bottom left, transparent 50%,#CCA56B 51%),
linear-gradient(to top left, transparent 50%,#CCA56B 51%);
background-position:0 0,0 100%,100% 0,100% 100%;
background-size:50.3% 50%;
background-repeat:no-repeat;
}
<div class="triangle">
</div>
这是另一个使用 clip-path 的想法:
.triangle {
margin-top: 100px;
height: 80px;
background: linear-gradient(to left, #CCA56B 50%, #BE955A 0);
-webkit-clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
<div class="triangle">
</div>
关于html - CSS 菱形/三 Angular 形分隔线/边框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49779519/