Html 纯CSS中的右横幅箭头

我正试图在CSS中为一个网站重新设计这些箭头，使其具有响应性。这两个家伙做了静态图像，但我希望他们是纯粹的CSS

这是一个用于更换鼠标盖的精灵。底部是鼠标悬停状态。箭头后面的背景需要是透明的

我想它应该是一个简单的div，里面有一个p或heading标签：

<div class="arrow_box">
  <p>UTILITIES</p>
</div> 

我到处都在搜索示例，我试图修改的所有内容似乎都无法完全控制元素的宽度和高度。带箭头的宽度为114px。单个状态的高度为29px

---

我已经玩了一个多小时了，试着把它调整到合适的尺寸，但似乎什么都没用。部分原因是我不知道这是怎么回事

所以这里的诀窍是能够正确控制高度。这里，我得到了一个跨距中的文本，行高：0，填充：15px。现在，我们精确地得到了30px的高度，可以使用：：after伪元素来制作箭头。宽度将由文本内容设置，但也可以使用显式宽度规则定义

<div class="arrow"><span>text</span></div>

.arrow{
  display:inline-block;
  height:auto;
  background-color:orange;
}

.arrow span{
  display:inline-block;
  line-height:0;
  padding:15px;
  color:white;
}

.arrow::after{
    width: 0;
    height: 0;
    position: absolute;
    right:0
    top: 0;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
    border-left: 15px solid orange;
    content: "";
}

添加您需要的任何颜色/悬停状态。你可以在小提琴上看到一些基本的规则

---

所以这里的诀窍是能够正确地控制高度。这里，我得到了一个跨距中的文本，行高：0，填充：15px。现在，我们精确地得到了30px的高度，可以使用：：after伪元素来制作箭头。宽度将由文本内容设置，但也可以使用显式宽度规则定义

<div class="arrow"><span>text</span></div>

.arrow{
  display:inline-block;
  height:auto;
  background-color:orange;
}

.arrow span{
  display:inline-block;
  line-height:0;
  padding:15px;
  color:white;
}

.arrow::after{
    width: 0;
    height: 0;
    position: absolute;
    right:0
    top: 0;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
    border-left: 15px solid orange;
    content: "";
}

添加您需要的任何颜色/悬停状态。你可以在小提琴上看到一些基本的规则

您可以使用：after伪元素执行此操作。您可以像这样更改悬停状态下伪元素的颜色 * { 框大小：边框框； } p{ 保证金：0； 左侧填充：10px； } .箭盒{ 背景：627680； 显示：块； 颜色：白色； 位置：相对位置； 高度：30px； 线高：30px； 宽度：114px； 过渡：所有0.3秒都容易进入； } .箭头框：在{ 内容：； 身高：0； 宽度：0； 位置：绝对位置； 排名：0； 右：0； 转化：转化率100%； 边框底部：15px实心透明； 边框顶部：15px实心透明； 左边框：20px实心627680； 右边框：15px实心透明； 过渡：所有0.3秒都容易进入； } .arrow_框：悬停{ 背景：2A92C2； } .arrow_框：悬停：之后{ 左边框：20px实心2A92C2； } 公用事业

您可以使用：after伪元素执行此操作。您可以像这样更改悬停状态下伪元素的颜色 * { 框大小：边框框； } p{ 保证金：0； 左侧填充：10px； } .箭盒{ 背景：627680； 显示：块； 颜色：白色； 位置：相对位置； 高度：30px； 线高：30px； 宽度：114px； 过渡：所有0.3秒都容易进入； } .箭头框：在{ 内容：； 身高：0； 宽度：0； 位置：绝对位置； 排名：0； 右：0； 转化：转化率100%； 边框底部：15px实心透明； 边框顶部：15px实心透明； 左边框：20px实心627680； 右边框：15px实心透明； 过渡：所有0.3秒都容易进入； } .arrow_框：悬停{ 背景：2A92C2； } .arrow_框：悬停：之后{ 左边框：20px实心2A92C2； } 公用事业

---

这支笔能满足你的需要吗？ 可能需要一些像素推动才能使其完美

只是需要调整一下：

border-width: 27px;
margin-top: -35px;

---

并为主元素和before元素添加悬停状态。

这支笔能提供您需要的吗？ 可能需要一些像素推动才能使其完美

只是需要调整一下：

border-width: 27px;
margin-top: -35px;

---

并为主元素和元素前添加悬停状态。

你考虑过梯度背景吗？

身体{ 背景：线性梯度45度，灰色，浅灰色，灰色，浅灰色，灰色，浅灰色，灰色，浅灰色，灰色，浅灰色，灰色，浅灰色，灰色，浅灰色； /*仅用于演示目的*/ } .阿罗{ 文本转换：大写； /*可选的*/ 填充物：3px1.5em 3p0.5em； 颜色：白色； 背景：线性梯度225度，透明0.6em，627680 0.6em顶部不重复，线性梯度45度，透明0.6em，627680 0.6em底部不重复； 背景大小：100%50%； /*每个渐变绘制箭头的一半*/ } .箭头：悬停{ /*更新渐变颜色*/ 背景：线性梯度225度，透明0.6em，2A92C2 0.6em顶部不重复，线性梯度45度，透明0.6em，2A92C2 0.6em底部不重复； 背景大小：100%50%； }

---

效用测试

是否考虑过梯度背景？

身体{ 背景：线性梯度45度，灰色，浅灰色，灰色，浅灰色，灰色，浅灰色，灰色，浅灰色，灰色，浅灰色，灰色，浅灰色，灰色，浅灰色； /*仅用于演示目的*/ } .阿罗{ 文本转换：大写； /*可选的*/ 填充物：3px1.5em 3p0.5em； 颜色：白色； 背景： 线性梯度225度，透明0.6em，627680 0.6em顶部不重复，线性梯度45度，透明0.6em，627680 0.6em底部不重复； 背景大小：100%50%； /*每个渐变绘制箭头的一半*/ } .箭头：悬停{ /*更新渐变颜色*/ 背景：线性梯度225度，透明0.6em，2A92C2 0.6em顶部不重复，线性梯度45度，透明0.6em，2A92C2 0.6em底部不重复； 背景大小：100%50%； }

---

实用程序测试兴趣选项。一点。。。辛苦，但有趣@Bosworth99它是gradientsbacground image&em的经典用法，而不是px单位，它允许您拥有不同的文本大小或长度，而无需麻烦。伪元素可自由用于在箭头或两者周围添加图标或绘制边框，否则：。。。示例免费的pseudo仍然可以使用有趣的选项。一点。。。辛苦，但有趣@Bosworth99它是gradientsbacground image&em的经典用法，而不是px单位，它允许您拥有不同的文本大小或长度，而无需麻烦。伪元素可自由用于在箭头或两者周围添加图标或绘制边框，否则：。。。示例免费的pseudo仍然可以使用