【问题标题】: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>

【问题讨论】:

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

标签: css css-shapes


【解决方案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;在包装中结合艾伦先生的回答得到我的最终产品。
    猜你喜欢
    • 1970-01-01
    • 2023-03-12
    • 1970-01-01
    • 1970-01-01
    • 2020-04-23
    • 1970-01-01
    • 2021-03-17
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多