This question already has answers here:
Skew div border of one side only using one div only
(1个答案)
Shape with a slanted side (responsive)
(3个答案)
3个月前关闭。
我需要在客户的网站上创建此文件,但是我无法格式化任何CSS或在互联网上找到类似内容,您能帮我吗?图片如下:
(1个答案)
Shape with a slanted side (responsive)
(3个答案)
3个月前关闭。
我需要在客户的网站上创建此文件,但是我无法格式化任何CSS或在互联网上找到类似内容,您能帮我吗?图片如下:
最佳答案
使用clip-path
可能是这样的
.wrapper {
clip-path: polygon(0 0, 100% 0%, 95% 100%, 0% 100%);
position: relative;
}
.content {
background: #0d6568;
color: #fff;
padding: 1em;
z-index: 1;
position: relative;
width: 90%;
clip-path: polygon(0 0, 100% 0%, 95% 100%, 0% 100%);
text-shadow: 2px 2px #000;
}
.wrapper:after {
content: '';
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
background: #cf895c;
}
<div class="wrapper">
<div class="content">
CONTENT
</div>
</div>
09-25 17:55