《css揭秘》第三章

2形状

2.1自适应椭圆

border-radius: 50%;

半椭圆

border-radius: 100% 0 0 100% / 50%;

border-radius: 50% / 100% 100% 0 0;

四分之一椭圆

border-radius: 100% 0 0 0;

2.2平行四边形

<a href="#yolo" class="button">
    <div>Click me</div>
</a>
.button { transform: skewX(-45deg); }
.button > div { transform: skewX(45deg); }

还有一种伪元素写法

.button {
        position: relative;
       /* 其他的文字颜色、内边距等样式…… */
}
.button::before {
      content: ''; /* 用伪元素来生成一个矩形 */
      position: absolute;
      top: 0; right: 0; bottom: 0; left: 0;
      z-index: -1;
      background: #58a;
      transform: skew(45deg);
}

2.3菱形图片

<div class="picture">
   <img src="./img/cat.jpg" alt="..." />
  </div>
   .picture {
    width: 200px;
    transform: rotate(45deg);
    overflow: hidden;
   }

   .picture>img {
    max-width: 100%;
    transform: rotate(-45deg) scale(1.42);
   }

还有另一种裁切路径的方法

img {
    width: 200px;
    clip-path: polygon(50% 0, 100% 50%,
      50% 100%, 0 50%);
    transition: 1s clip-path;
   }

   img:hover {
    clip-path: polygon(0 0, 100% 0,
      100% 100%, 0 100%);
   }

2.4切角效果

div {
    background: #58a;
    background:
     linear-gradient(135deg, transparent 15px, #58a 0) top left,
     linear-gradient(-135deg, transparent 15px, #58a 0) top right,
     linear-gradient(-45deg, transparent 15px, #58a 0) bottom right,
     linear-gradient(45deg, transparent 15px, #58a 0) bottom left;
    background-size: 50% 50%;
    background-repeat: no-repeat;
   }

弧形切角

div {
    background: #58a;
    background:
     radial-gradient(circle at top left,
      transparent 15px, #58a 0) top left,
     radial-gradient(circle at top right,
      transparent 15px, #58a 0) top right,
     radial-gradient(circle at bottom right,
      transparent 15px, #58a 0) bottom right,
     radial-gradient(circle at bottom left,
      transparent 15px, #58a 0) bottom left;
    background-size: 50% 50%;
    background-repeat: no-repeat;
    padding: 3%;
    color: white;
   }

SVG方法

div {
    border: 20px solid #58a;
    border-image: 1 url('data:image/svg+xml,\
    <svg xmlns="http://www.w3.org/2000/svg"\
    width="3" height="3" fill="%2358a">\
    <polygon points="0,1 1,0 2,0 3,1 3,2 2,3 1,3 0,2"/>\
    </svg>');
    background: #58a;
    color: white;
    background-clip: padding-box;
   }

裁切路径方法

div {
    background: #58a;
    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);
   }

2.4梯形标签

.div {
     position: relative;
     display: inline-block;
     padding: .5em 1em .35em;
     color: white;
    }

    .div::before {
     content: '';
     /*用伪元素来生成一个矩形*/
     position: absolute;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
     z-index: -1;
     background: #58a;
     transform: scaleY(1.3) perspective(.5em) rotateX(5deg);
     transform-origin: bottom;
    }

 <nav>
     <a href="#">Home</a>
     <a href="#">Projects</a>
     <a href="#">About</a>
 </nav>
nav>a{
       position: relative;
       display: inline-block;
       padding: .3em 1em 0;
   }
   nav>a::before{
       content: '';
       position: absolute;
       top: 0;
       right: 0;
       bottom: 0;
       left: 0;
       z-index: -1;
       background: #ccc;
       background-image: linear-gradient(hsla(0,0%,100%,.6),hsla(0,0%,100%,0));
       border: 1px solid rgba(0,0,0,.4);
       border-bottom: none;
       border-radius: .5em .5em 0 0;
       transform: perspective(.5em) rotateX(5deg);
       transform-origin: bottom;
   }

2.5简单的饼图

基于 transform 的解决方案

<style lang="scss">
   body{
    height: 100vh;
   }
   .pie {
    height: 200px;
    position: relative;
    width: 200px;
    line-height: 100px;
    border-radius: 50%;
    background: yellowgreen;
    background-image:
     linear-gradient(to right, transparent 50%, #655 0);
    color: transparent;
    text-align: center;
    margin: 5%;
   }

   @keyframes spin {
    to {
     transform: rotate(.5turn);
    }
   }

   @keyframes bg {
    50% {
     background: #655;
    }
   }

   .pie::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: 50%;
    height: 100%;
    border-radius: 0 100% 100% 0 / 50%;
    background-color: inherit;
    transform-origin: left;
    animation: spin 50s linear infinite,
     bg 100s step-end infinite;
    animation-play-state: paused;
    animation-delay: inherit;
   }
  </style>
 </head>

 <body>
  <div class="pie" style="animation-delay: -20s"></div>
  <div class="pie" style="animation-delay: -60s"></div>

 </body>

SVG 解决方案

 svg {
    width: 100px;
    height: 100px;
    transform: rotate(-45deg);
    background: yellowgreen;
    border-radius: 50%;
   }

   circle {
    fill: yellowgreen;
    stroke: #655;
    stroke-width: 32;
    stroke-dasharray: 38 100;
    /* 可得到比率为38%的扇区 */
   }
       <svg viewBox="0 0 32 32">
   <circle r="16" cx="16" cy="16" />
  </svg>