制作自定义div形状

Question

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

到目前为止我的代码是jsFiddle

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

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

＆＃13;

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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，您可以创建灵活的三角形，可以扩展以适应容器高度。

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;