如何使用纯CSS在图片上创建相同的“三角形” border
?
Fiddle:
码
/* .TEST {
border-bottom: 169px solid red;
border-top: 169px solid red;
border-left: 42px solid transparent;
border-right: 42px solid transparent;
height: 169px;
width: 169px;
} */
#d {
width: 100%;
font-size: 25px;
}
#d1,
#d2,
#d3 {
width: 33%;
float: left;
padding: 30px;
color: #D2B746;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
}
#d2 {
width: 34%;
color: #000;
}
.gradient_black {
background: #303437;
}
.gradient_gold {
background: #d4ba49;
}
<div id="d">
<div id="d1" class="gradient_black">Test</div>
<div id="d2" class="gradient_gold TEST">Test</div>
<div id="d3" class="gradient_black">Test</div>
</div>
编辑:
还是我应该使用SVG?
最佳答案
使用transform: skew()
可以实现
注意:我对您的代码做了一些调整
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
margin: 0
}
#d {
width: 100%;
font-size: 25px;
background: #303437;
display: flex
}
#d1,
#d2,
#d3 {
width: calc((100% / 3) - 6px);
padding: 30px;
color: #D2B746;
}
#d2.gradient_gold {
background: #d4ba49;
color: #000;
}
#d>div {
transform: skew(-20deg)
}
<div id="d">
<div id="d1" class="gradient_black">Test</div>
<div id="d2" class="gradient_gold">Test</div>
<div id="d3" class="gradient_black">Test</div>
</div>
关于html - 左 float 的多个CSS三 Angular 形效果,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/37738692/