WEBページで、ボックスを作ると、四角形になりますが、ちょっと変化をつけて強調したいようなことがあると思います。
ボックスにCSSを追加して、変化をつけてみたいと思います。
吾輩は猫
吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪どうあくな種族であったそうだ。
HTML
<div class="ripped size1of3"> <h3>吾輩は猫</h3> 吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪どうあくな種族であったそうだ。 </div>
CSS
.ripped:before, .ripped:after {
content: "";
height: 3px;
width:100%;
position: absolute;
left: 0;
right: 0;
clip-path: polygon( 0 0, 5% 100%, 10% 0, 15% 100%, 20% 0, 25% 100%, 30% 0, 35% 100%, 40% 0, 45% 100%, 50% 0, 55% 100%, 60% 0, 65% 100%, 70% 0, 75% 100%, 80% 0, 85% 100%, 90% 0, 95% 100%, 100% 0);
}
.ripped:before{
background:#ddd;
top:0;
z-index:10;
}
.ripped:after{
background:inherit;
bottom:-3px;
}
.ripped{
position:relative;
background:#fff;
color:#333;
box-shadow: 0 0 8px gray;
padding:1rem;
}
吾輩は猫
吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪どうあくな種族であったそうだ。
CSS
.receipt {
position: relative;
flex: none;
padding:1rem;
background:#000;
color:#eee;
clip-path: polygon(100% 0, 100% calc(100% - 6px), 98% 100%, 96% calc(100% - 6px), 94% 100%, 92% calc(100% - 6px), 90% 100%, 88% calc(100% - 6px), 86% 100%, 84% calc(100% - 6px), 82% 100%, 80% calc(100% - 6px), 78% 100%, 76% calc(100% - 6px), 74% 100%, 72% calc(100% - 6px), 70% 100%, 68% calc(100% - 6px), 66% 100%, 64% calc(100% - 6px), 62% 100%, 60% calc(100% - 6px), 58% 100%, 56% calc(100% - 6px), 54% 100%, 52% calc(100% - 6px), 50% 100%, 48% calc(100% - 6px), 46% 100%, 44% calc(100% - 6px), 42% 100%, 40% calc(100% - 6px), 38% 100%, 36% calc(100% - 6px), 34% 100%, 32% calc(100% - 6px), 30% 100%, 28% calc(100% - 6px), 26% 100%, 24% calc(100% - 6px), 22% 100%, 20% calc(100% - 6px), 18% 100%, 16% calc(100% - 6px), 14% 100%, 12% calc(100% - 6px), 10% 100%, 8% calc(100% - 6px), 6% 100%, 4% calc(100% - 6px), 2% 100%, 0 calc(100% - 6px), 0 0);
}
吾輩は猫
吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪どうあくな種族であったそうだ。
CSS
.letter{
background-color: #f1f2f6;
border-style: solid;
border-width: 40px 40px 40px;
border-color: #f1f2f6;
-moz-border-image: url('https://tenman.info/labo/css/files/paper.jpg') 40 40 40 repeat;
-webkit-border-image: url('https://tenman.info/labo/css/files/paper.jpg') 40 40 40 repeat;
-o-border-image: url('https://tenman.info/labo/css/files/paper.jpg') 40 40 40 repeat;
border-image: url('https://tenman.info/labo/css/files/paper.jpg') 40 40 40 repeat;
}
torn-paper.css — News Room - UNC Health Care
CSS Ripped Border Effect with clip-path
Ripped Paper Effect
Photo by Kelsey Dody on Unsplash