使用 CSS 边框创建 pseudo-elements 高度与 parent 相同的形状
Using CSS borders to create shapes with pseudo-elements with same height as parent
我正在尝试为我的网站创建 "ribbon" 个标题。
这是我到目前为止能够模拟的。
这适用于短标题（对于 short 的某些值），但当标题想要换行时失败。是否可以使用创建 "swallowtail" 形状的边框方法，但 :after pseudo-elements 的边框宽度与 parent 的高度相关，而不是 hard-coded 不求助于脚本？
是否有其他方法可以实现类似的视觉效果？
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;
}
<!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>
我会使用渐变创建相同的形状，它会像你想要的那样响应：
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;
}
<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>
另一种方法是保留您的代码并使用 clip-path 和 :after 伪元素：
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%);
}
<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>
我正在尝试为我的网站创建 "ribbon" 个标题。
这是我到目前为止能够模拟的。
这适用于短标题（对于 short 的某些值），但当标题想要换行时失败。是否可以使用创建 "swallowtail" 形状的边框方法，但 :after pseudo-elements 的边框宽度与 parent 的高度相关，而不是 hard-coded 不求助于脚本？
是否有其他方法可以实现类似的视觉效果？
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;
}
<!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>
我会使用渐变创建相同的形状，它会像你想要的那样响应：
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;
}
<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>
另一种方法是保留您的代码并使用 clip-path 和 :after 伪元素：
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%);
}
<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>