如何在css中创建这个？

Question

我想在CSS中创建这种设计（或者可能是bootstrap functionnality），所以如果你知道一个教程或我需要的东西。

我想创建的样式：

由于

Answer 1

你可以使用一些css技巧（+定位后）轻松获得这个标签标签：

HTML：

<span class="label-tag">Type</span>

CSS：

.label-tag {
   display:inline-block;
   position: relative;
   height: 20px;
   line-height: 20px;
   padding: 10px 20px;
   color: white;
   background-color: #509e2f;
}

.label-tag:after {
  content: '';
  position: absolute;
  left: 100%;
  top: 0px;
  border-width: 20px 0px 20px 20px;
  border-style: solid;
  border-color: transparent transparent transparent #509e2f;
}

工作小提琴：https://jsfiddle.net/bd45gynk/