l-hammer/You-need-to-know-css

# Cutout corners

?> Background：:point_right: [gradient](https://developer.mozilla.org/zh-CN/docs/Web/CSS/gradient), [clip-path](https://developer.mozilla.org/zh-CN/docs/Web/CSS/clip-path)

<vuep template="#bevel-corners"></vuep>

<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,<svg xmlns="http://www.w3.org/2000/svg" width="3" height="3" fill="%23b4a078"><polygon points="0,1 1,0 2,0 3,1 3,2 2,3 1,3 0,2"/> </svg>');
    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>
<template>
  <main>
    <div class="bevel-corners">
      <p>① linear-gradient</p>
      <div>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.</div>
    </div>
    <div class="bevel-corners">
      <p>② radial-gradient</p>
      <div>Etiam dignissim diam quis enim lobortis scelerisque fermentum dui faucibus. Neque egestas congue quisque egestas. Quis ipsum suspendisse ultrices gravida dictum fusce.</div>
    </div>
    <div class="bevel-corners">
      <p>③ Inline SVG</p>
      <div>Cras semper auctor neque vitae tempus quam pellentesque nec. Congue quisque egestas diam in arcu. Purus in mollis nunc sed id semper risus in.</div>
    </div>
    <div class="bevel-corners">
      <p>④ clip-path</p>
      <div>Molestie ac feugiat sed lectus vestibulum. Eu turpis egestas pretium aenean pharetra magna ac. Porttitor eget dolor morbi non arcu risus quis.</div>
    </div>
  </main>
</template>
<script>  
</script>
</script>

### Browser Support

<iframe
  width="100%"
  height="436px"
  frameborder="0"
  src="https://caniuse.bitsofco.de/embed/index.html?feat=css-gradients&amp;periods=future_1,current,past_1,past_2,past_3&amp;accessible-colours=false">
</iframe>

<iframe
  width="100%"
  height="436px"
  frameborder="0"
  src="https://caniuse.bitsofco.de/embed/index.html?feat=css-clip-path&amp;periods=future_1,current,past_1,past_2,past_3&amp;accessible-colours=false">
</iframe>