Question

红色边框下的形状：

我很努力地使用CSS3来实现这种形状但是我一直都失败了。我还尝试添加border-bottom和border-left。请参阅CSS代码以了解我在做什么：

#trapezoid {
  background: blue;
  height: 100px;
  width: 100px;
  margin: auto;
}
#trapezoid:before {
  content: "";
  position: absolute;
  border-top: 50px solid red;
  border-left: 50px solid transparent;
  margin: 50px 0px 0px -50px;
  transform: rotate(0deg);
}
#trapezoid:after {
  content: "";
  position: absolute;
  border-top: 50px solid red;
  border-right: 50px solid transparent;
  margin: 50px 0px 0px 100px;
  transform: rotate(0deg);
}

<div id="trapezoid"></div>

这个CSS形状几乎接近我的要求但我们不能在扩展区域使用图像。请建议我一些其他方法。 挑战就是这个，我必须创建相同的布局，并且在灰色背景的位置我要展示一些内容

Answer 1

如果你有坚实的背景色试试这个

＆＃13;

body {
  background: grey;
  margin: 0;
}

.container {
  width: 100%;
  height: 200px;
  background: url("http://lorempixel.com/1000/300/nature/3");
  background-size:cover;
}

.content {
  height: 100px;
  color: #fff;
}

.shape {
  position: relative;
  height: 100px;
  overflow:hidden;
}

.shape:after {
  content: "";
  position: absolute;
  width: 40%;
  height: 100%;
  background: grey;
  top: 0;
  transform: skew(30deg);
  left: -10%;
}

.shape:before {
  content: "";
  position: absolute;
  width: 40%;
  height: 100%;
  background: grey;
  top: 0;
  transform: skew(-30deg);
  right: -10%;
}

＆＃13;

<div class="container">
  <div class="content">
    Contents
  </div>
  <div class="shape"></div>
</div>

＆＃13;

Answer 2

根据所需的browser support，您可以使用剪辑路径：

#trapezoid {
  background: url(https://upload.wikimedia.org/wikipedia/commons/8/83/Jho_Arce_User_Profile_Image.jpg) no-repeat;
  background-size: cover;
  height: 100px;
  width: 200px;
  margin: auto;
  -webkit-clip-path: polygon(100% 0, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0 0);
  clip-path: polygon(100% 0, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0 0)
}

body {
  background: silver;
}

<div id="trapezoid"></div>

Answer 3

使用:before和:after在底部放置2个三角形

#trapezoid {
width: 200px;
height: 100px;
background-color: red;
position: relative;
}
#trapezoid:before {
content: "";
width: 0;
height: 0;
border-style: solid;
border-width: 0 30px 30px 30px;
border-color: transparent transparent white transparent;
display: block;
transform: rotate(-135deg);
position: absolute;
bottom: -5px;
left: -20px;
}
#trapezoid:after {
content: "";
width: 0;
height: 0;
border-style: solid;
border-width: 0 30px 30px 30px;
border-color: transparent transparent white transparent;
display: block;
transform: rotate(135deg);
position: absolute;
bottom: -5px;
right: -20px;
}

<div id="trapezoid"></div>

Answer 4

我认为这样做会有所帮助。希望它对你有用。

<div class="main-box"> #trial</div>

             ifelse = (iter_pos >> 
                         nocaselit(L"if") >> expression >> nocaselit(L"then") >> 
                           block_statements_eol >> -ifelse_ifelse >> nocaselit(L"end") >> nocaselit(L"if") >> 
                      iter_pos)   
               [_val = construct<common_node>(type_cmd_ifelse,LOCATION(_1,_5), key_cond, _2, key_seq, _3, key_else, phoenix::bind(&makeOptNode, _4))];

Answer 5

如果可能，最好使用png图像作为背景。如果那不是一个选项，在两端创建两个div，显示内联并旋转它们以创建斜率，小心它们的大小。另一种可能性可以在之后使用，如答案中给出的那样，但如果导航栏在顶部是粘性的，那么看起来不太好。边界将隐藏其下的内容。

如何使用CSS创建此形状

5 个答案: