具有渐变背景的CSS渐变双箭头形状 [英] CSS Gradient double-arrow shape with gradient background

问题描述

我看到了以下问题和答案:

解决方案

我将分3个步骤进行操作:

1. 创建具有背景渐变(例如，从橙色到红色)的普通矩形元素
2. 创建具有背景色的伪元素 :: before ，渐变从(例如，橙色)开始
3. 创建具有背景色的伪元素 :: after ，渐变以(例如红色)结尾

现在，您只需要正确放置伪元素并使用 border 属性创建

  div {职位:相对显示:inline-block;文本转换:大写；白颜色;高度:3em；最小宽度:10em；行高:3em；font-family:Arial；字号:1.5em；font-weight:粗体;文本对齐:居中；背景:线性渐变(向右，橙色，红色)；填充:0 1em;保证金:0 1em;}div :: before，div ::之后{内容: '';位置:绝对；高度:0；宽度:0;边框顶部:1.5em固体透明；底部边框:1.5em透明固体；}div :: before {左:-1em;右边框:1em实心橙色；}div ::之后{右:-1em；左边框:1em红色常亮；}  

 < div> Exemple</div>  

I saw this question and answer: CSS Gradient arrow shape with inner shadow and gradient border and I'm looking to create the same thing but with an arrow on each side.

Here is what the final result would looks like:

解决方案

I would do it in 3 steps:

1. create a normal rectangular element with a background gradient (e.g. from orange to red)
2. create a pseudo element ::before with a background color, the gradient is starting with (e.g. orange)
3. create a pseudo element ::after with a background color, the gradient is ending with (e.g. red)

Now you just need to position the pseudo elements properly and use the border property to create the triangle shape:

div {
  position: relative;
  display: inline-block;
  text-transform: uppercase;
  color: white;
  height: 3em;
  min-width: 10em;
  line-height: 3em;
  font-family: Arial;
  font-size: 1.5em;
  font-weight: bold;
  text-align: center;
  background: linear-gradient(to right, orange, red);
  padding: 0 1em;
  margin: 0 1em;
}

div::before,
div::after {
  content: '';
  position: absolute;
  height: 0;
  width: 0;
  border-top: 1.5em solid transparent;
  border-bottom: 1.5em solid transparent;
}

div::before {
  left: -1em;
  border-right: 1em solid orange;
}

div::after {
  right: -1em;
  border-left: 1em solid red;
}

<div>Exemple</div>

这篇关于具有渐变背景的CSS渐变双箭头形状的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！