带有斜角形状的横幅

我正在尝试在最后创建一个带有三角形形状的横幅。带有斜角形状的横幅

.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>

enter image description here

来源

2015-04-21 PokéDev

使用伪元素 –

为什么向下票呢？他尝试了他已发布的东西 –

只是帮助你摆脱这个为y ou've尝试，但如你预期它没有工作...所以基本的想法是，我们可以使用CSS伪元素来创建效果..

Demo

.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; /* Tweak this to increase triangles height */ 
    position: absolute; 
    right: 0; 
    top: 0; 
}

在这里，我什么都不做看上去，我们正在使用一个伪元素，即只是一个虚拟元素，它不存在于DOM中，但我们可以使用CSS插入它，并将伪元素定位到包装的右侧。这将帮助你获得像最后一样的功能区。请注意，三角形的颜色是硬编码的，并且不透明。

来源

2015-04-21 18:41:58

如果我不想让它走完整个页面，我必须实现类似width：200px;在包装？ –

@BhoffDev是的，只要确保你的文本是在限制之内，否则它会叠加，或者它会隐藏在三角形之后...为了防止为你的包装器元素指定一个'padding-right'，以防止文本if这是一个很长的字符串 –

试试这个它的工作原理

.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>

来源

2015-04-21 18:41:46

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

我已经使用：选择器后的包装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 
}

来源

2015-04-21 18:43:17

我用你的宽度：500px;在与Allens先生结合的包装中回答我的最终产品。 –

带有斜角形状的横幅

回答

相关问题