我需要创建一个响应三角形 <div>
。我可以使用偏斜的css创建它,但是它没有响应,当我更改屏幕宽度时,它变得混乱了。有人能帮我吗?提前非常感谢您!
这是我想要的:
这是我到目前为止的代码:
.skewed-box-one:before {
background-color: red;
content: '';
height: 100px;
width: 30.05%;
display: block;
visibility: visible;
position: absolute;
top: -40px;
transform: skewY(8deg);
border-top: 3px solid #BBDEFB;
}
.skewed-box-one:after {
background-color: red;
content: '';
height: 130px;
width: 70%;
display: block;
visibility: visible;
position: absolute;
top: -46px;
right: 0;
transform: skewY(-4deg);
border-top: 3px solid #BBDEFB;
}
<div class="skewed-box-one"></div>
您可以使用CSS clip-path
,请注意,浏览器支持有限。使用此工具可以生成所需的形状。
.triangle1 {
clip-path: polygon(50% 0%, 100% 84%, 100% 100%, 0 100%, 0 84%);
background: red;
width: 100%;
height: 100%;
}
.triangle2 {
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);;
background: red;
width: 100%;
height: 100%;
}
.container {
width: 50%;
height: 300px;
margin-bottom: 20px;
}
<div class="container">
<div class="triangle1">1</div>
</div>
<div class="container">
<div class="triangle2">2</div>
</div>
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句