《CSS揭秘》-总结47个Css技巧（二）：形状技巧

注：本文案例来源于《CSS揭秘》这本书。

自适应的椭圆

用 border-radius 50% 就可以实现一个宽高自适应的椭圆。那如果想要实现半椭圆呢？

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

上面等同于

border-radius 50% 50% 50% 50% / 100% 100%  0 0 // 横轴方向是50%的缩放，纵轴的左上，右上为100%，右下，左下为0。

平行四边形

用 transform: skewX(-10deg) 来实现~

.box
  position relative
  height 180px
  width 300px
  margin 40px auto
  &::before                     // 在伪元素中设置倾斜，不会使得元素变形。
    content: ''
    position: absolute
    top: 0
    right: 0
    bottom: 0
    left: 0
    z-index: -1                // 不会影响到内容
    background: #678
    transform: skew(10deg)     // 设置变形

菱形图片

使用 clip-path属性。该属性可以生成多种形状。网上还找到了一个 https://bennettfeely.com/clippy/ 可以拖拽边线生成css。

  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);

切角效果

mixin.styl中定义：beveled-corners()。

beveled-corners($bg, $tl:0, $tr=$tl, $br=$tl, $bl=$tr) // 切角效果，传入背景颜色，左上、右上、右下、左下切割长度
  background: $bg
  background: linear-gradient(135deg, transparent $tl,$bg 0) top left,
              linear-gradient(225deg, transparent $tr,$bg 0) top right,
              linear-gradient(-45deg, transparent $br,$bg 0) bottom right,
              linear-gradient(45deg, transparent $bl,$bg 0)  bottom left;
  background-size: 50% 50%
  background-repeat: no-repeat

使用：

beveled-corners(#58a, 15px)

梯形标签页

使用 transform perspective(50) rotateX(5deg)。

// 梯形标签页
.trapezoid
  height 100px
  width 200px
  margin 40px auto
  padding 50px
  color #fff
  position relative
  display inline-block
  &::before
    content: ''
    position: absolute
    top 0
    right 0
    bottom 0
    left 0
    z-index -1
    background #58a
    transform perspective(50) rotateX(5deg)

简单的饼图

使用 conic-gradient 角向渐变。

height 180px
width 180px
border-radius 50%
background: conic-gradient(#eea2a2 20%, #bbc1bf  0, #bbc1bf  30%, #57c6e1 0);