CSS嵌入透明边框

使用背景色的H1上的CSS来匹配附加图像中的标题样式

在边框上使用透明特性时，边会因钝角而变得非常参差不齐

代码笔：

HTML:

---

最简单的方法是使用单个元素和伪元素并进行转换

正文{高度：100vh；文本对齐：居中；过渡：背景.3s轻松} 正文：悬停{背景：红色} .丝带{ 位置：相对位置； 背景：333人； 显示：内联块； 宽度：480px； 高度：80px； 线高：80px； 颜色：白色； z指数：1 } .ribbon:之前，.ribbon:之后{ 内容：； 位置：绝对位置； 背景：333人； 宽度：100%； z指数：-1； 身高：100%； } .ribbon:之前{ 左：0； 变换：倾斜32度； } .ribbon:之后{ 右：0； 变换：倾斜-32度； }

---

Header Title最简单的方法是将单个元素与伪元素和transform一起使用

正文{高度：100vh；文本对齐：居中；过渡：背景.3s轻松} 正文：悬停{背景：红色} .丝带{ 位置：相对位置； 背景：333人； 显示：内联块； 宽度：480px； 高度：80px； 线高：80px； 颜色：白色； z指数：1 } .ribbon:之前，.ribbon:之后{ 内容：； 位置：绝对位置； 背景：333人； 宽度：100%； z指数：-1； 身高：100%； } .ribbon:之前{ 左：0； 变换：倾斜32度； } .ribbon:之后{ 右：0； 变换：倾斜-32度； } 标题请检查此代码 只需在使用伪类的同时使用一个实体和另一个透明值 演示 身体{ 背景：f0fcff； 最大宽度：200em； 填充：0.15%； 保证金：0自动； 文本对齐：居中； } .大背景{ 背景：urlhttp://www.thewallpapers.org/photo/22244/Forrest-Green-Nature.jpg; 宽度：100%； 高度：600px； } a{ 颜色：1f355e； 文字装饰：无； -webkit转换：.2s轻松颜色； 过渡色：.2s； } a:悬停{ 颜色：0c1524； } P 李{ 颜色：rgba0,0,0,6； 线高：1.5em； } 保险商实验室{ 文本对齐：左对齐； } .丝带{ 位置：相对位置； 最大宽度：24em； 保证金：-1.4em自动2em； z指数：1； 高度：2.8125em； 线高：2.8125em； 背景：1f355e； 颜色：fff； 文本对齐：居中； 文本转换：大写； 字体大小：正常； 字体大小：1.2米； } .ribbon:之前， .ribbon:之后{ 内容：； 宽度：.5em； 排名：0； 位置：绝对位置； 显示：块； 边框：1.45em实心1f355e； z指数：-2； } .ribbon:之前{ 左：-1.45em； 右边框宽度：.75em； 左边框颜色：透明； } .ribbon:之后{ 右：-1.35em； 左边框宽度：.75em； 右边框颜色：透明； } 标题 占位符lorem ipsum dolor sit amet，奉献精英。这是一种常见的怀孕方式。佩伦茨克酒后驾车。纳拉·尼布·奎斯是拉奥里特调味品。这是一个很好的例子。埃尼安·特里斯蒂克是一个巨大的交流特里斯蒂克。这是一种珍贵的植物。在eget quam的Sed scelerisque dui id dui aliquam elementum。利奥·奥奇（leo orci）是一家名为《生命之光》（pharetra tellus molestie vitae）的公司。奥古斯·普鲁斯（augue purus）的尤里西斯（Quisque ultricies），无卢克图斯（nulla luctus）的权杖。 在大麦片粥中，有一种叫做“前酒”，一种叫做“后酒”，另一种叫做“发酵弧”。Suspendisse risus augue，mollis non lacus ut，hendrerit venenatis risus。Mauris pulvinar turpis id sem venenatis scelerisque a vitae ipsum。阿利奎姆非侵权人，拍卖人无身份证，特里斯蒂克·努克。在这之前，我要向你保证，我要活下去。阿利奎姆·康塞奎特·努克·泰勒斯。库拉比图和帕特·马萨。请把它放在适当的地方。这是一个谎言，是一个谎言。埃涅亚是一位伟大的领袖，在法雷特拉·努拉。塞德·马萨·托托、布兰迪·艾洛斯·欧盟、马莱苏达·艾库利斯·麦格纳

请检查这个代码 只需在使用伪类的同时使用一个实体和另一个透明值 演示 身体{ 背景：f0fcff； 最大宽度：200em； 填充：0.15%； 保证金：0自动； 文本对齐：居中； } .大背景{ 背景：urlhttp://www.thewallpapers.org/photo/22244/Forrest-Green-Nature.jpg; 宽度：100%； 高度：600px； } a{ 颜色：1f355e； 文字装饰：无； -webkit转换：.2s轻松颜色； 过渡色：.2s； } a:悬停{ 颜色：0c1524； } P 李{ 颜色：rgba0,0,0,6； 线高：1.5em； } 保险商实验室{ 文本对齐：左对齐； } .丝带{ 位置：相对位置； 最大宽度：24em； 保证金：-1.4em自动2em； z指数：1； 高度：2.8125em； 线高：2.8125em； 背景：1f355e； 颜色：fff； 文本对齐：居中； 文本转换：大写； 字体大小：正常； 字体大小：1.2米； } .ribbon:之前， .ribbon:之后{ 内容：； 宽度：.5em； 排名：0； 位置：绝对位置； 显示：块； 边框：1.45em实心1f355e； z指数：-2； } .ribbon:之前{ 左：-1.45em； 右边框宽度：.75em； 左边框颜色：透明； } .ribbon:之后{ 右：-1.35em； 左边框宽度：.75em； 右边框颜色： 透明的 } 标题 占位符lorem ipsum dolor sit amet，奉献精英。这是一种常见的怀孕方式。佩伦茨克酒后驾车。纳拉·尼布·奎斯是拉奥里特调味品。这是一个很好的例子。埃尼安·特里斯蒂克是一个巨大的交流特里斯蒂克。这是一种珍贵的植物。在eget quam的Sed scelerisque dui id dui aliquam elementum。利奥·奥奇（leo orci）是一家名为《生命之光》（pharetra tellus molestie vitae）的公司。奥古斯·普鲁斯（augue purus）的尤里西斯（Quisque ultricies），无卢克图斯（nulla luctus）的权杖。 在大麦片粥中，有一种叫做“前酒”，一种叫做“后酒”，另一种叫做“发酵弧”。Suspendisse risus augue，mollis non lacus ut，hendrerit venenatis risus。Mauris pulvinar turpis id sem venenatis scelerisque a vitae ipsum。阿利奎姆非侵权人，拍卖人无身份证，特里斯蒂克·努克。在这之前，我要向你保证，我要活下去。阿利奎姆·康塞奎特·努克·泰勒斯。库拉比图和帕特·马萨。请把它放在适当的地方。这是一个谎言，是一个谎言。埃涅亚是一位伟大的领袖，在法雷特拉·努拉。塞德·马萨·托托、布兰迪·艾洛斯·欧盟、马莱苏达·艾库利斯·麦格纳

---

您的示例的以下更改是否足够：？您的示例的以下更改是否足够：？请在答案中包含您的关键点，以便OP能够理解为什么这样做有效，而他们的却无效。您可以检查。功能区：之后和：之前。其中包括“左透明”和“右透明边框”值请编辑您的答案以向将来的读者解释此答案的工作原理此答案非常好，但在调整此规则以添加边框左宽度时对一件重要的事情没有帮助：。功能区：之前{左：-1.45em；边框右宽度：.75em；边框左颜色：透明；边框左宽度：.4em；}若要使功能区的角度不太严重，请在答案中包含您的关键点，以便OP能够理解为什么这样做，而他们的不起作用。您可以检查。功能区：在之后和之前。其中包括左透明和右透明边框值请编辑您的答案，以向未来的读者解释这是如何工作的答案很好，但在调整此规则以添加边框左宽度时没有帮助：。ribbon:before{left:-1.45em；边框右宽度：.75em；边框左颜色：透明；边框左宽度：.4em；}为了使色带的角度不那么严重，边缘变得锯齿状。这是一个非常棒的解决方案，完全解决了问题。Codepen更新：非常棒！这是一个非常棒的解决方案，完全解决了问题。Codepen更新：

<div class="big-bg"></div>
<div class="section">
  <h2 class="ribbon">Header Title</h2>
  <p>PLACEHOLDER lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vitae sapien et quam commodo gravida sed eu nisi. Pellentesque a dui est. Nulla imperdiet nibh quis sem condimentum laoreet. Aliquam vel nisi posuere, mollis erat ut, mattis elit. Aenean tristique a magna ac tristique. Ut malesuada lorem nec elit pulvinar rutrum. Sed scelerisque dui id dui aliquam elementum at eget quam. Nunc ultricies leo orci, eu pharetra tellus molestie vitae. Quisque ultricies augue purus, ac scelerisque nulla luctus non.

Sed pretium, risus nec aliquam aliquam, arcu tellus fermentum justo, in cursus orci massa imperdiet magna. Suspendisse risus augue, mollis non lacus ut, hendrerit venenatis risus. Mauris pulvinar turpis id sem venenatis scelerisque a vitae ipsum. Aliquam non tortor imperdiet, auctor nulla id, tristique nunc. Nunc pretium ornare erat, vitae dictum odio viverra vel. Aliquam consequat nunc tellus. Curabitur et volutpat massa. Praesent placerat nec velit et tincidunt. Sed purus lacus, vulputate vel est ut, viverra suscipit justo. Aenean a efficitur magna, in pharetra nulla. Sed massa tortor, blandit id eros eu, malesuada iaculis magna.</p>
</div>

// Colors
$color-bg-body: #f0fcff;
$color-primary: #1f355e;

// Initial Styles
body{ background: $color-bg-body; max-width: 200em; padding: 0 15%; margin: 0 auto; text-align: center; }
.big-bg{
  background:url(http://www.thewallpapers.org/photo/22244/Forrest-Green-Nature.jpg);
  width: 100%;
  height: 600px;
}
a{ color: $color-primary; text-decoration: none; transition: 0.2s ease color;
  &:hover{ color: darken($color-primary, 15%); }
}
p, li{ color: rgba(black, 0.6); line-height: 1.5em; }
ul{ text-align: left; }

.ribbon{
  // Ribbon Variables
  $ribbon-height: 2.8125em;
  $ribbon-width: 24em;

  position: relative;
  max-width: $ribbon-width;
  margin: -1.4em auto 2em;
  height: $ribbon-height; line-height: $ribbon-height;
  background: $color-primary;
  color: #fff;
  text:{
    align: center;
    transform: uppercase;
  }
  font:{
    weight: normal;
    size: 1.2em;
  }

  // Ribbon Triangles
  &:before,
  &:after{
    content: '';
    display: block;
    width: 0; height: 0;
    position: absolute;
    top: 0;
    border-top: solid $ribbon-height/2 transparent;
    border-bottom: solid $ribbon-height/2 transparent;
  }

  &:before{
    left: 0;
    border-left: solid $ribbon-height/4 $color-bg-body;
  }

  &:after{
    right: 0;
    border-right: solid $ribbon-height/4 $color-bg-body;
  }
}