文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
社区首页 >问答首页 >使用CSS边框创建具有与父元素高度相同的伪元素的形状

问使用CSS边框创建具有与父元素高度相同的伪元素的形状
EN

Stack Overflow用户
提问于 2018-08-04 06:10:32
回答 1查看 62关注 0票数 0

我正在尝试为我的网站创建“丝带”标题。

这就是我到目前为止所能模拟的。

这对于短标题可以正常工作(对于一些值为short)，但是当标题想要换行时就会失败。是否可以使用创建“燕尾”形状的边框方法，但让:after伪元素的边框宽度与父元素的高度相关，而不是在不求助于脚本的情况下进行硬编码？

有没有其他方法可以达到类似的视觉效果？

​

代码语言：javascript
复制
html, body, div { margin: 0; }
body { background: lightgrey; }
.wrapper {
    background: white;
    padding: 2em;
    padding-top: 0;
    margin: 2em;
    margin: 2em auto;
    width: 80%;
}
.ribbon {
    font-size: 32px;
    line-height: 1.5em;
    display: inline-block;
    font-family: Optima;
    color: white;
    background: #9c0000;
    margin: 0;
    position: relative;
    width: 100%;
    padding: 1em;
    padding-left: 1.5em;
    left: -1.5em;
    filter: drop-shadow(5px 5px 3px grey);
    -webkit-filter: drop-shadow(5px 5px 3px grey);
    -moz-filter: drop-shadow(5px 5px 3px grey);
    margin-top: 1em;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}
.ribbon-bot:before {
    position: absolute;
    height: 0;
    width: 0;
    content: "";
    border-color: red green blue yellow;
    border-color: #4d0000 #4d0000 transparent transparent;
    border-style: solid;
    border-width: 0.1em 0.25em 0.1em 0.25em;
    left: 0em;
    bottom: -0.199375em;
}
.ribbon-top:before {
    position: absolute;
    height: 0;
    width: 0;
    content: "";
    border-color: transparent #4d0000 #4d0000 transparent;
    border-style: solid;
    border-width: 0.1em 0.25em 0.1em 0.25em;
    left: 0em;
    top: -0.199375em;
}
.ribbon:after {
    position: absolute;
    width: 0;
    right: -20px;
    bottom: 0px;
    content: "";
    border-color: #9c0000 transparent #9c0000;
    border-width: 1.75em 20px 1.75em 0;
    border-style: solid;
    z-index: -1;
}
代码语言：javascript
复制
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <div class="wrapper">
        <div class="ribbon ribbon-bot">Ribbon</div>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non mi libero. Nam 
ultrices malesuada nulla, eu faucibus eros. Nulla non est odio. Maecenas 
vulputate nec sem vitae viverra. In vitae dapibus purus. Morbi mattis mi nulla, 
sed iaculis justo mollis et. Integer porttitor augue nisl, ac auctor nisl 
posuere vitae. Praesent at ligula fermentum, maximus mi ac, vehicula mi. Nam 
ligula mi, suscipit id dictum nec, varius sagittis nisl. Lorem ipsum dolor sit 
amet, consectetur adipiscing elit. Suspendisse consequat ipsum a nibh imperdiet 
interdum.</p>

        <div class="ribbon ribbon-top">A Moderately Long Heading Goes Here A Moderately Long Heading Goes Here</div>
        <p>Donec venenatis ante tellus, venenatis consectetur arcu sagittis at. Phasellus 
eu neque a dolor porta rutrum et ac lorem. Nulla ornare nisl quis est lacinia 
vehicula. Sed elementum ante elit, interdum porta elit tristique ac. Praesent 
felis dolor, luctus elementum nisi non, vehicula aliquet mauris. Vestibulum 
fermentum erat nibh, in facilisis lorem bibendum sed. Phasellus condimentum 
pharetra quam, et placerat massa auctor nec. Mauris fringilla hendrerit lectus, 
nec congue elit semper tempus. Pellentesque convallis interdum ligula, et 
faucibus nulla vulputate eget. Donec mattis orci at leo fringilla mollis.</p>
    </div>
</body>
</html>

​

css
border
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-08-04 06:20:00

我会使用渐变创建相同的形状，它会像你想要的那样响应：

​

代码语言：javascript
复制
html, body, div { margin: 0; }
body { background: lightgrey; }
.wrapper {
    background: white;
    padding: 2em;
    padding-top: 0;
    margin: 2em;
    margin: 2em auto;
    width: 80%;
}
.ribbon-bot,
.ribbon-top{
    font-size: 32px;
    line-height: 1.5em;
    display: inline-block;
    color: white;
    background: 
     /*the small triangl at the bottom left*/
     linear-gradient(to bottom left, #4d0000 49%,transparent 50%) bottom left/15px 12px,
     /*the 2 triangle shape at the left*/
     linear-gradient(to top right,   #9c0000 49%,transparent 50%) 100% calc(100% - 12px)/20px calc(50% - 6px),
     linear-gradient(to bottom right,#9c0000 49%,transparent 50%) right top/20px calc(50% - 6px),
     /*the main part*/
     linear-gradient(#9c0000,#9c0000) left top/calc(100% - 20px) calc(100% - 12px);
    background-repeat:no-repeat;
    position: relative;
    width: 100%;
    padding: 1em;
    padding-left: 1.5em;
    left: -1.5em;
    filter: drop-shadow(5px 5px 3px grey);
    margin-top: 1em;
}
.ribbon-top {
   background: 
     linear-gradient(to top left, #4d0000 49%,transparent 50%) top left/15px 12px,
     linear-gradient(to top right,#9c0000 49%,transparent 50%) bottom right /20px calc(50% - 6px),
     linear-gradient(to bottom right,#9c0000 49%,transparent 50%) 100% 12px/20px calc(50% - 6px),
     linear-gradient(#9c0000,#9c0000) left bottom/calc(100% - 20px) calc(100% - 12px);
     background-repeat:no-repeat;
}
代码语言：javascript
复制
<div class="wrapper">
        <div class="ribbon-bot">Ribbon</div>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non mi libero. Nam 
ultrices malesuada nulla, eu faucibus eros. Nulla non est odio. Maecenas 
vulputate nec sem vitae viverra. In vitae dapibus purus. Morbi mattis mi nulla, 
sed iaculis justo mollis et. Integer porttitor augue nisl, ac auctor nisl 
posuere vitae. Praesent at ligula fermentum, maximus mi ac, vehicula mi. Nam 
ligula mi, suscipit id dictum nec, varius sagittis nisl. Lorem ipsum dolor sit 
amet, consectetur adipiscing elit. Suspendisse consequat ipsum a nibh imperdiet 
interdum.</p>

        <div class="ribbon-top">A Moderately Long Heading Goes Here A Moderately Long Heading Goes Here</div>
        <p>Donec venenatis ante tellus, venenatis consectetur arcu sagittis at. Phasellus 
eu neque a dolor porta rutrum et ac lorem. Nulla ornare nisl quis est lacinia 
vehicula. Sed elementum ante elit, interdum porta elit tristique ac. Praesent 
felis dolor, luctus elementum nisi non, vehicula aliquet mauris. Vestibulum 
fermentum erat nibh, in facilisis lorem bibendum sed. Phasellus condimentum 
pharetra quam, et placerat massa auctor nec. Mauris fringilla hendrerit lectus, 
nec congue elit semper tempus. Pellentesque convallis interdum ligula, et 
faucibus nulla vulputate eget. Donec mattis orci at leo fringilla mollis.</p>
    </div>

​

另一种方法是保留您的代码，并使用带有:after伪元素的clip-path：

​

代码语言：javascript
复制
html, body, div { margin: 0; }
body { background: lightgrey; }
.wrapper {
    background: white;
    padding: 2em;
    padding-top: 0;
    margin: 2em;
    margin: 2em auto;
    width: 80%;
}
.ribbon {
    font-size: 32px;
    line-height: 1.5em;
    display: inline-block;
    font-family: Optima;
    color: white;
    background: #9c0000;
    margin: 0;
    position: relative;
    width: 100%;
    padding: 1em;
    padding-left: 1.5em;
    left: -1.5em;
    filter: drop-shadow(5px 5px 3px grey);
    -webkit-filter: drop-shadow(5px 5px 3px grey);
    -moz-filter: drop-shadow(5px 5px 3px grey);
    margin-top: 1em;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}
.ribbon-bot:before {
    position: absolute;
    height: 0;
    width: 0;
    content: "";
    border-color: #4d0000 #4d0000 transparent transparent;
    border-style: solid;
    border-width: 0.1em 0.25em 0.1em 0.25em;
    left: 0em;
    bottom: -0.199375em;
}
.ribbon-top:before {
    position: absolute;
    height: 0;
    width: 0;
    content: "";
    border-color: transparent #4d0000 #4d0000 transparent;
    border-style: solid;
    border-width: 0.1em 0.25em 0.1em 0.25em;
    left: 0em;
    top: -0.199375em;
}
.ribbon:after {
    position: absolute;
    width: 20px;
    left:100%;
    top: 0;
    height:100%;
    content: "";
    background: #9c0000;
    -webkit-clip-path: polygon(0% 0%, 100% 0, 0 50%, 100% 100%, 0% 100%);
    clip-path: polygon(0% 0%, 100% 0, 0 50%, 100% 100%, 0% 100%);
}
代码语言：javascript
复制
<div class="wrapper">
        <div class="ribbon ribbon-bot">Ribbon</div>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non mi libero. Nam 
ultrices malesuada nulla, eu faucibus eros. Nulla non est odio. Maecenas 
vulputate nec sem vitae viverra. In vitae dapibus purus. Morbi mattis mi nulla, 
sed iaculis justo mollis et. Integer porttitor augue nisl, ac auctor nisl 
posuere vitae. Praesent at ligula fermentum, maximus mi ac, vehicula mi. Nam 
ligula mi, suscipit id dictum nec, varius sagittis nisl. Lorem ipsum dolor sit 
amet, consectetur adipiscing elit. Suspendisse consequat ipsum a nibh imperdiet 
interdum.</p>

        <div class="ribbon ribbon-top">A Moderately Long Heading Goes Here A Moderately Long Heading Goes Here</div>
        <p>Donec venenatis ante tellus, venenatis consectetur arcu sagittis at. Phasellus 
eu neque a dolor porta rutrum et ac lorem. Nulla ornare nisl quis est lacinia 
vehicula. Sed elementum ante elit, interdum porta elit tristique ac. Praesent 
felis dolor, luctus elementum nisi non, vehicula aliquet mauris. Vestibulum 
fermentum erat nibh, in facilisis lorem bibendum sed. Phasellus condimentum 
pharetra quam, et placerat massa auctor nec. Mauris fringilla hendrerit lectus, 
nec congue elit semper tempus. Pellentesque convallis interdum ligula, et 
faucibus nulla vulputate eget. Donec mattis orci at leo fringilla mollis.</p>
    </div>

​

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/51680642

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2024 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号 | 京公网安备号11010802020287

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档