Эффект среза углов
?> Предварительные знания: 
градиент, clip-path```markdown
<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>
① линейный градиент
Параграф с заполнительным текстом. Ла ла ла де дах де дах де дах де ла.
```Ла ла ла де дах де дах де дах де ла. Ла ла ла де дах де дах де дах де ла.
```markdown
② радиальный градиент
Параграф заполнителя. 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
Параграф заполнителя. 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
Параграф заполнителя. 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.
```
### Поддержка браузерами<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>
Опубликовать ( 0 )