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

如何解决纯CSS标签div，带有圆角三角形指针

我正在寻求以购物标签的形状创建一个div，并且已经走得很远了，但是我想通过在顶点处以及混合到标签之前四舍五入三角形指针来使其像素完美。

更多细节

想要，这里的圆角类型：

如果我能在某个地方得到一个小白点（我尝试过运气：“·”，运气不佳），奖励积分。

我已经查看了圆角三角形上的stackoverflow项目，因此这似乎可行，但是它们都是独立的三角形，未添加到div的末尾。而且我正在尝试不在矩形div旁边制作一个独立的三角形。

谢谢您的任何想法！

curl -d param1=value1 -d param2=value2 -H "Content-Type: application/json" -X POST http://localhost/<path>

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

那里看起来很近，而且这个点有点舍入。但是通向矩形的边缘仍然很锐利，并且现在已经在标签的右侧进行了很大的倒圆角处理。我猜需要调整模糊值，所以我现在朝那个方向看，尽管这对我来说是一个新话题。

解决方法

您可以将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,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>

,

基于上述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%,transparent);
    content: "";
    height: 16px;
    width: 16px;
    position: absolute;
    border-radius: 4px 3px;
    top: 2px;
    transform: rotate(45deg);
    left: -7px;
}

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