"CSS Secret" - summed up 47 Css skills (b): Shape Tips

Note: This article comes from the case of "CSS Secret" book.

Adaptive oval

With 50% border-radius can be achieved a high adaptive wide oval. So, if you want to achieve semi-ellipse it?

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

The above is equivalent to

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

Parallelogram

Using transform: skewX (-10deg) to achieve ~

.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)     // 设置变形

Diamond pictures

Use clip-path property. The attribute may generate a variety of shapes. Online also found a https://bennettfeely.com/clippy/ can drag the edges generate css.

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

Cutaway effect

mixin.styl defined: 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

use:

beveled-corners(#58a, 15px)

Trapezoidal tab

使用 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)

Simple Pie

Use conic-gradient angle to the gradient.

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