制作自定义 div 形状 [重复]答案

【问题标题】：Make a custom div shape [duplicate]制作自定义 div 形状 [重复]
【发布时间】：2017-01-18 14:01:15
【问题描述】：

如何制作这样的 div？请有任何想法。

到目前为止，这是我的代码：jsFiddle

.triangle-up-left {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 20px 15px 0 0;
  border-color: #007bff transparent transparent transparent;
  position: absolute;
}

.category-span {
  padding: 10px;
  background-color: red;
}

<div class="row">
  <span class="category-span">Category</span><span class="triangle-up-left"></span>

</div>

【问题讨论】：

标签： css css-shapes

【解决方案1】：

这是一个快速的解决方案，试试吧：

#shape {
  border-top: 100px solid black;
  border-right: 60px solid transparent;
  width: 300px;
}
#text {
  margin-top: -70px;
  padding-left: 50px;
  color: white;
  font-size: xx-large;
}

<div id="shape"></div>
<div id="text">Category</div>

【讨论】：

【解决方案2】：

尝试使用clip-path

Support browsers

例子

.category-span {
  padding: 10px 30px 10px 10px;
  background-color: red;
  -webkit-clip-path: polygon(100% 0, 86% 100%, 0 100%, 0 0);
clip-path: polygon(100% 0, 86% 100%, 0 100%, 0 0);
}

<div class="row">
  <span class="category-span">Ecommerce</span>
</div>

【讨论】：

这非常适合我。

【解决方案3】：

使用 CSS linear-gradient，您可以创建灵活的三角形，该三角形可以扩展以适应容器高度。

.category-span {
  background-color: #000;
  display: inline-block;
  vertical-align: top;
  margin-bottom: 20px;
  position: relative;
  max-width: 70%;
  padding: 10px;
  color: #fff;
}
.category-span:after {
  background: linear-gradient(to bottom right, #000 50%, transparent 50%);
  position: absolute;
  content: '';
  width: 20px;
  left: 100%;
  bottom: 0;
  top: 0;
}

<div class="row">
  <span class="category-span">Ecommerce Ecommerce Ecommerce</span>
  <span class="category-span">Ecommerce Ecommerce Ecommerce Ecommerce Ecommerce Ecommerce Ecommerce Ecommerce </span>
  <span class="category-span">Ecommerce Ecommerce Ecommerce Ecommerce Ecommerce Ecommerce Ecommerce Ecommerce Ecommerce Ecommerce Ecommerce Ecommerce Ecommerce Ecommerce Ecommerce Ecommerce Ecommerce Ecommerce Ecommerce Ecommerce Ecommerce Ecommerce Ecommerce Ecommerce Ecommerce Ecommerce Ecommerce Ecommerce Ecommerce Ecommerce Ecommerce Ecommerce Ecommerce Ecommerce Ecommerce Ecommerce Ecommerce Ecommerce Ecommerce Ecommerce Ecommerce Ecommerce Ecommerce Ecommerce Ecommerce Ecommerce Ecommerce Ecommerce </span>
</div>

【讨论】：