切角效果
?> 背景知识：
gradient, clip-path
<script v-pre type="text/x-template" id="bevel-corners">
<style>
main{
width: 100%;
padding: 60px 0;
}
.bevel-corners{
display: flex;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
flex-wrap: wrap;
margin-bottom: 20px;
}
.bevel-corners > div{
width: 249px;
color: #FFF;
padding: 1.2em 1.8em;
hyphens: auto;
text-align: justify;
background: #b4a078;
}
.bevel-corners > p{
width: 116px;;
}
.bevel-corners:nth-of-type(1) > div{
background: linear-gradient(45deg, transparent 12px, #b4a078 13px) bottom left,
linear-gradient(135deg, transparent 12px, #b4a078 13px) top left,
linear-gradient(-135deg, transparent 12px, #b4a078 13px) top right,
linear-gradient(-45deg, transparent 12px, #b4a078 13px) bottom right;
background-size: 51% 51%;
background-repeat: no-repeat;
}
.bevel-corners:nth-of-type(2) > div{
background: radial-gradient(circle at bottom left, transparent 15px, #b4a078 16px) bottom left,
radial-gradient(circle at top left, transparent 15px, #b4a078 16px) top left,
radial-gradient(circle at top right, transparent 15px, #b4a078 16px) top right,
radial-gradient(circle at bottom right, transparent 15px, #b4a078 16px) bottom right;
background-size: 51% 51%;
background-repeat: no-repeat;
}
.bevel-corners:nth-of-type(3) > div{
padding: 0 9px;
border: 18px solid transparent;
border-image: 1 url('data:image/svg+xml, ');
background-clip: padding-box;
}
.bevel-corners:nth-of-type(4) > div{
clip-path: polygon(20px 0, calc(100% - 20px) 0, 100% 20px, 100% calc(100% - 20px), calc(100% - 20px) 100%, 20px 100%, 0 calc(100% - 20px), 0 20px);
transition: 1s clip-path;
}
.bevel-corners:nth-of-type(4):hover > div{
clip-path: polygon(0 0, 0 0, 100% 0, 100% 0, 100% 100%, 100% 100%, 0 100%, 0 100%);
}
</style>
① linear-gradient
A paragraph of filler text.La la la de dah de dah de dah de la.La la la de dah de dah de dah de la.La la la de dah de dah de dah de la.
② radial-gradient
A paragraph of filler text.La la la de dah de dah de dah de la.La la la de dah de dah de dah de la.La la la de dah de dah de dah de la.
③ 内联SVG
A paragraph of filler text.La la la de dah de dah de dah de la.La la la de dah de dah de dah de la.La la la de dah de dah de dah de la.
④ clip-path
A paragraph of filler text.La la la de dah de dah de dah de la.La la la de dah de dah de dah de la.La la la de dah de dah de dah de la.
<script>
</script>
</script>
浏览器支持
<iframe src="https://caniuse.bitsofco.de/embed/index.html?feat=css-gradients&periods=future_1,current,past_1,past_2,past_3&accessible-colours=false" frameborder="0" width="100%" height="436px"></iframe>
<iframe src="https://caniuse.bitsofco.de/embed/index.html?feat=css-clip-path&periods=future_1,current,past_1,past_2,past_3&accessible-colours=false" frameborder="0" width="100%" height="436px"></iframe>
