如何解决如何在HTML中获得这种形状?
有人可以帮我为下面的形状编写纯HTML和CSS代码吗?
提前致谢
解决方法
HTML / CSS
.shape {
clip-path: polygon(0 19%,100% 0,100% 100%,0 81%);
background-color: red;
width: 200px;
height: 400px;
}
<div class='shape'></div>
您可以使用剪切路径制作任何形状。 尝试在此网站上制作形状https://bennettfeely.com/clippy/
,透明边框
div {
display:inline-block;
box-sizing: border-box;
height: 200px;
border: 40px solid;
border-top-color: #00000000;
border-left: 0;
border-bottom-color: #00000000;
}
<div></div>
多个背景
div {
display: inline-block;
box-sizing: border-box;
height: 200px;
width: 50px;
background: linear-gradient(to top left,black 50%,white 51%) 0 0/100% 25% no-repeat,linear-gradient(to bottom left,white 51%) 0 100%/100% 25% no-repeat,black;
}
<div></div>
伪元素
div {
position: relative;
display: inline-block;
box-sizing: border-box;
height: 200px;
width: 50px;
background: black;
}
div:before,div:after {
content: '';
position: absolute;
height: 25%;
width: 100%;
}
div:before {
top: 0;
background: linear-gradient(to top left,white 51%) top/100% no-repeat ;
}
div:after {
bottom: 0;
background: linear-gradient(to bottom left,white 51%) bottom/100% no-repeat;
}
<div></div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。