Html 如何获得'；分区'；使用CSS将其形状设置为旗帜

我想在网站上的一些元素上添加一个标签，然后设计一个标签，这个标签是一面旗帜，底部有一个倒V形切口

到目前为止，我有：

HTML

然而，我需要的背景是白色和边框周围的紫色和1px的形状。我试着把同样的形状放在这一个里面，只是白色的，但一切都变得一团糟，没有达到预期的效果

也许这是一种错误的方法，但我希望最终的标签看起来像这样：

---

快速解决方法是旋转它：

 transform: rotate(90deg);

---

---

另一个解决方案是SVG路径。

以下是我的想法

它符合你所寻找的，但我想应该有一个“更好的方式”，而不是玩边界

HTML

---

我尝试过更新您的CSS以创建您想要的效果：

.css形状{
高度：250px；
宽度：0px；
左边框：99px实心#f00fff；
右边框：99px实心#f00fff；
边框底部：39px实心透明；
职位：相对
}
n形{
高度：248px；
宽度：0px；
左边框：95px实心#ffffff；
右边框：95px实心#ffffff；
边框底部：39px实心透明；
位置：绝对位置；
顶部：-6px；
右：-95px；
}
.顶{
位置：绝对位置；
顶部：0px；
宽度：198px；
高度：2倍；
背景色：#f00fff；
左：-99px；
边框底部：1px实心#f00fff；
}

#flag {
  width: 110px;
  height: 56px;
  padding-top: 15px;
  position: relative;
  background: red;
  color: white;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-align: center;
  text-transform: uppercase;
}
#flag:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 0;
  border-bottom: 13px solid #eee;
  border-left: 55px solid transparent;
  border-right: 55px solid transparent;
}

演示：

#标志{
宽度：110px；
高度：56px；
填充顶部：15px；
位置：相对位置；
背景：红色；
颜色：白色；
字体大小：11px；
字母间距：0.2米；
文本对齐：居中；
文本转换：大写；
}
#旗帜：之后{
内容：“；
位置：绝对位置；
左：0；
底部：0；
宽度：0；
身高：0；
边框底部：13px实心#eee；
左边框：55px实心透明；
右边框：55px实心透明；
}

---

这里有一个稍微不同的方法，使用和旋转创建一个轮廓横幅，如下所示：

• 此成角度的形状是使用

  位置：绝对

  伪元素、

  ：在

  之前和

  ：在

  之后创建的：

• 多余部分通过父级上的

  overflow:hidden

  切断，形成我们的横幅：

• 轮廓是用

  框阴影创建的

  ，通过将x轴拉/推46px-

  框阴影：46px 0 0 3px 000

完整示例

div{
高度：100px；
宽度：100px；
保证金：100像素自动；
位置：相对位置；
溢出：隐藏；
边框：实心3px#000；
边框底部：无；
文本对齐：居中；
}
部门：之前，
部门：之后{
内容：''；
显示：块；
身高：100%；
宽度：200%；
变换：旋转（20度）；
盒影：46px03px#000；
位置：绝对位置；
顶部：1px；
右图：-120%；
}
部门：之后{
变换：旋转（-20度）；
左-120%；
盒影：-46px03px#000；
}

---

文本

带有CSS:

您可以使用“在伪元素上”创建底部带有透明倒三角形的背景：

body{background:url（'http://lorempixel.com/image_output/food-q-c-640-480-1.jpg'）；背景尺寸：封面；}
p{
位置：相对位置；
宽度：150px；高度：150px；
溢出：隐藏；
边框顶部：3倍实心#EF0EFE；
}
p:之前，p:之后{
内容：''；
位置：绝对位置；
顶部：-3px；
高度：100%；宽度：50%；
z指数：-1；
边框：2px实心#EF0EFE；
框大小：边框框；
}
p:以前{
左：0；
变换原点：0；
变换：歪斜（-20度）；
边框宽度：0 0 4px 3px；
}
p:之后{
右：0；
变换原点：100%0；
变换：歪斜（20度）；
边框宽度：0 3px4p0；
}

---

一些文本
 < /代码> 
一个更好的解决方案，文本容易定位在中间，使用一个矩形背景和一个三角形底部。

.css形状{
位置：相对位置；
高度：250px；
宽度：150px；
背景#FFD05B；
颜色：#fff；
文本对齐：居中；
线高：225px；
字体大小：90px；
框大小：边框框；
}
.css形状：之后{
内容：''；
位置：绝对位置；
左：0；
底部：0；
显示：块；
宽度：100%；
高度：50px；
边框底部：25px实心#fff；
左边框：75px实心透明；
右边框：75px实心透明；
框大小：边框框；
}
1
您好，谢谢您的建议，起初我添加了错误的小提琴链接。在选中的情况下无需旋转，足以更改右侧和底部之间的交换边框属性值。谢谢你的好意。：）令人惊叹的！在尺寸上添加了一些调整（使其更适合实际网站），看起来很有魅力！！：）谢谢这是一个很棒的解决方案！非常感谢！：）如何删除虚线？包括：）您的方法效果更好-尤其是如果您希望标志透明（不透明度）-以防您想将其放置在图像上
 transform: rotate(90deg);

<div id="text-div">
    Text
</div>
<div id="pacman">
    <div id="left-triangle"></div>
    <div id="right-triangle"></div>
</div>

#text-div {
    width: 118px;
    height: 60px;
    text-align: center;
    border: 1px solid purple;
    border-bottom: 0px;
    line-height: 60px;
}

#pacman { 
    width: 0px; 
    height: 0px;
    border-right: 60px solid purple; 
    border-top: 0px; 
    border-left: 60px solid purple; 
    border-bottom: 60px solid transparent;
}

#left-triangle{
    position: relative;
    left: -59px;
    border-right: 58px solid transparent; 
    border-top: 0px; 
    border-left: 58px solid white; 
    border-bottom: 58px solid transparent;
}
#right-triangle{
    position: relative;
    top: -59px;
    left: -57px;
    border-right: 58px solid white;
    border-top: 0px; 
    border-left: 58px solid transparent; 
    border-bottom: 58px solid transparent;
}

#flag {
  width: 110px;
  height: 56px;
  padding-top: 15px;
  position: relative;
  background: red;
  color: white;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-align: center;
  text-transform: uppercase;
}
#flag:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 0;
  border-bottom: 13px solid #eee;
  border-left: 55px solid transparent;
  border-right: 55px solid transparent;
}