制作自定义 div 形状

Question

如何制作这样的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>

Answer 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>

Answer 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>

Answer 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>

制作自定义 div 形状

Make a custom div shape

css

css-shapes