?> Background：:point_right: 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
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dignissim diam quis enim lobortis scelerisque fermentum dui faucibus in.
② radial-gradient
Etiam dignissim diam quis enim lobortis scelerisque fermentum dui faucibus. Neque egestas congue quisque egestas. Quis ipsum suspendisse ultrices gravida dictum fusce.
③ Inline SVG
Cras semper auctor neque vitae tempus quam pellentesque nec. Congue quisque egestas diam in arcu. Purus in mollis nunc sed id semper risus in.
④ clip-path
Molestie ac feugiat sed lectus vestibulum. Eu turpis egestas pretium aenean pharetra magna ac. Porttitor eget dolor morbi non arcu risus quis.