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或在互联网上找到类似内容,您能帮我吗?图片如下:

css - 如何在CSS中创建此名称,或者搜索这样的名称是什么?-LMLPHP

最佳答案

使用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