带有角度形状的横幅[重复]

Posted 2023-03-06

【中文标题】带有角度形状的横幅[重复]

【英文标题】：Banner with angled shapes [duplicate]

【发布时间】：2015-06-29 02:21:29

【问题描述】：

我正在尝试创建一个末端为三角形的横幅。

.wrapper 
  padding: 50px;
  font-size: 0px;
  line-height: 0%;
  width: 0px;
  border-top: 20px solid gray;
  border-bottom: 20px solid gray;
  border-right: none;

<div class="wrapper">TEXT HERE</div>

【问题讨论】：

为什么投反对票？他尝试了他发布的内容

【参考方案1】：

试试这个，效果很好

.wrapper 
  font-family: arial;
  font-size: 12px;
  color: white;
  background-color: black;
  border: 1px solid white;
  padding: 8px;
  width: 100px;
  text-align: center;
  position: relative;

.wrapper:after 
  content: '';
  position: absolute;
  border-top: 16px solid transparent;
  border-bottom: 16px solid transparent;
  border-right: 16px solid white;
  z-index: 10;
  top: 0px;
  right: 0px;

<div class="wrapper">TEXT HERE</div>

【参考方案2】：

只是帮助你解决这个问题，你已经尝试过了，但它并没有像你预期的那样工作......所以基本的想法是我们可以使用 CSS 伪元素来创建这种效果..

.wrapper 
  background: #C3C3C3;
  padding: 20px;
  font-size: 40px;
  font-family: Arial;
  text-align: center;
  position: relative;


.wrapper:after 
  content: "";
  width: 0;
  height: 0;
  border-top: 42px solid transparent;
  border-bottom: 42px solid transparent;
  border-right: 40px solid white;
  position: absolute;
  right: 0;
  top: 0;

<div class="wrapper">TEXT HERE</div>

在这里，我没有做任何花哨的事情，我们使用的是伪元素，即只是一个虚拟元素，它在 DOM 中不存在，但我们可以使用 CSS 插入它并将该伪元素定位到包装器的右侧。这将帮助您获得像丝带一样的末端。请注意，三角形的颜色是硬编码的，它不是透明的。

【讨论】：

如果我不希望它占据整个页面的长度，我是否必须实现类似 width:200px; 的东西？在包装中？

@BhoffDev 是的，只要确保您的文本在限制范围内，否则它将覆盖或隐藏在三角形后面...为了防止将一些 padding-right 分配给您的包装元素，以便如果它是一个长字符串，它会阻止文本

【参考方案3】：

这是小提琴。 https://jsfiddle.net/nileshmahaja/s5egaebr/

我使用了 :after 选择器到包装器 div。

CSS

.wrapper 
  padding: 0 50px;
  font-size: 0px;
  line-height: 0%;
  width: 0px;
  height:120px;
  background:#ddd;
  position:relative;
  width:500px;


.wrapper:after 
  content:'';
  width: 0px;
  height: 0px;
  border-top: 60px solid transparent;
  border-bottom: 60px solid transparent;
  border-right: 60px solid #fff;
  position:absolute;
  right:0

【讨论】：

我用了你的宽度：500px；在包装中结合艾伦先生的回答得到我的最终产品。