纯CSS标签div，带圆角三角指针

Question

我想创建一个购物标签形状的 div，并且已经做得很远了，但我想通过在三角形指针的峰值和刚好处四舍五入使其像素完美在融入标签之前。

更大的细节：

想要的圆角类型在这里：

如果我能在某处找到小白点（我尝试了内容：“·”，但运气不佳）。

我在 Whosebug 上查找了圆角三角形的项目，所以这似乎可行，但它们都是独立的三角形，没有添加到 div 的末尾。我正在尝试 w/o 在我的矩形旁边制作一个独立的三角形 div。

感谢您的任何想法！

.tag {
  background-color: red;
  border-radius: 0 3px 3px 0;
  color: #fff;
  display: inline-block;
  font-family: verdana;
  font-size: 12px;
  height: auto;
  line-height: 12px;
  margin-left: 9px;
  padding: 3px 6px 3px 3px;
  position: relative;
}

.tag:before {
  content: "";
  line-height: 6px;
  position: absolute;
  width: 0;
  height: 0;
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  border-right: 9px solid #f00;
  top: 0;
  left: -9px;
}

<div class="tag">hello</div>

--- 根据建议进行编辑 ---

.tag {
    background-color: red;
    border-radius: 0 3px 3px 0;
    clip-path: polygon(10px 0, 100% 0, 100% 100%, 10px 100%, 0 50%);
    color: #fff;
    display: inline-block;
    font-family: verdana;
    font-size: 12px;
    filter: url('#goo');
    height: auto;
    line-height: 12px;
    margin-left: 15px;
    padding: 3px 12px 3px 15px;
    position: relative;
}

<div class="tag">Hello</div>
<svg style="visibility: hidden; position: absolute;" width="0" height="0" xmlns="http://www.w3.org/2000/svg" version="1.1">
    <defs>
        <filter id="goo"><feGaussianBlur in="SourceGraphic" stdDeviation="5" result="blur" />
            <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9" result="goo" />
            <feComposite in="SourceGraphic" in2="goo" operator="atop"/>
        </filter>
    </defs>
</svg>

这个看起来差不多，尖头有点圆。但是通向矩形的边缘仍然很锋利，现在它在标签的右侧变圆了很多。我猜模糊值需要调整，所以我现在正在朝那个方向看，尽管这对我来说是一个新话题。

Answer 1

您可以使用 clip-path 作为形状，使用 SVG 滤镜来设置圆角（调整 stdDeviation 来控制半径）和使用渐变色来设置圆点：

.box {
  display: inline-block;
  filter: url('#goo');
}

.box div {
  margin: 10px;
  padding: 20px 40px 20px 20px;
  font-size: 35px;
  font-weight: bold;
  font-family: sans-serif;
  color:#fff;
  transform-origin: right center;
  transform:rotate(-45deg);
  background: 
    radial-gradient(8px at calc(100% - 20px) 50%,#fff 99%,transparent),/* the dot */
    linear-gradient(60deg,red,orange); /* gradient coloration */
  clip-path: polygon(0 0, calc(100% - 30px) 0, 100% 50%, calc(100% - 30px) 100%, 0 100%);
}

<div class="box">
  <div>SALE</div>
</div>

<svg style="visibility: hidden; position: absolute;" width="0" height="0" xmlns="http://www.w3.org/2000/svg" version="1.1">
    <defs>
        <filter id="goo"><feGaussianBlur in="SourceGraphic" stdDeviation="5" result="blur" />    
            <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9" result="goo" />
            <feComposite in="SourceGraphic" in2="goo" operator="atop"/>
        </filter>
    </defs>
</svg>

使用掩码在点内具有透明度：

.box {
  display: inline-block;
  filter: url('#goo');
}

.box div {
  margin: 10px;
  padding: 20px 40px 20px 20px;
  font-size: 35px;
  font-weight: bold;
  font-family: sans-serif;
  color:#fff;
  transform-origin: right center;
  transform:rotate(-45deg);
  -webkit-mask: radial-gradient(9px at calc(100% - 20px) 50%,transparent 99%,#fff);
  background:linear-gradient(60deg,red,orange); /* gradient coloration */
  clip-path: polygon(0 0, calc(100% - 30px) 0, 100% 50%, calc(100% - 30px) 100%, 0 100%);
}

body {
  background:linear-gradient(to right,#888,#fff);
}

<div class="box">
  <div>SALE</div>
</div>

<svg style="visibility: hidden; position: absolute;" width="0" height="0" xmlns="http://www.w3.org/2000/svg" version="1.1">
    <defs>
        <filter id="goo"><feGaussianBlur in="SourceGraphic" stdDeviation="5" result="blur" />    
            <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9" result="goo" />
            <feComposite in="SourceGraphic" in2="goo" operator="atop"/>
        </filter>
    </defs>
</svg>

Answer 2

根据上面 Temani 的回答，我开始思考 :before 的背景和旋转，以及剪辑 :before 元素的能力。所以，我只是在它前面放了一个盒子，给它一些边界半径，把它旋转成一个菱形，然后把它正确地放在我的标签上。哇哇！

我也可以使用剪辑路径移除菱形的右侧，但在我的情况下我不需要。

.tag {
    background-color: red;
    border-radius: 0 3px 3px 0;
    color: #fff;
    display: inline-block;
    font-family: verdana;
    font-size: 12px;
    font-weight: 300;
    height: auto;
    line-height: 12px;
    margin-left: 15px;
    padding: 5px 6px 3px 12px;
    position: relative;
}

.tag:before {
    background: red radial-gradient(2px at 8px 50%, #fff 99%, transparent);
    content: "";
    height: 16px;
    width: 16px;
    position: absolute;
    border-radius: 4px 3px;
    top: 2px;
    transform: rotate(45deg);
    left: -7px;
}

<div class="tag">Hello</div>

纯CSS标签div，带圆角三角指针

Pure CSS tag div, with rounded triangle pointer

css

pseudo-element