一、自适应椭圆

border-radius 可以给 div 的四个角上做圆角，参数可以写椭圆的横向半径和纵向半径。

  1. .exercise1-1 {
  2.     background: tan;
  3.     border-radius: 50% / 50%;
  4. }
  6. .exercise1-2 {
  7.     background: tan;
  8.     border-radius: 50% / 100% 100% 0 0;
  9. }
  11. .exercise1-3 {
  12.     background: tan;
  13.     border-radius: 100% 0 0 100% / 50%;
  14. }
  16. .exercise1-4 {
  17.     background: tan;
  18.     border-radius: 100% 0 0 0 / 100% 0 0 0;
  19. }

image.png

二、平行四边形

transform 属性中的 skew 函数可以使元素做倾斜，它做了全部的倾斜，如果子元素想回正，就把它做反向倾斜。使用伪元素也可以达到这样的效果，需要注意的是设置一下 z-index，放在文字的下面。

  1. .exercise2-11 {
  2.     background: tan;
  3.     transform: skewX(-45deg);
  4. }
  6. .exercise2-12 {
  7.     transform: skewX(45deg);
  8. }
  10. .exercise2-2 {
  11.     position: relative;
  12. }
  14. .exercise2-2:after {
  15.     position: absolute;
  16.     content: '';
  17.     background: tan;
  18.     transform: skewX(-45deg);
  19.     top: 0;
  20.     left: 0;
  21.     bottom: 0;
  22.     right: 0;
  23.     z-index: -1;
  24. }

image.png

三、菱形图片

菱形图片可以使用 transform 中 rotate 函数做旋转 45°，也可以直接在原图上做裁剪。

  1. .exercise3-11 {
  2.     margin: 50px;
  3.     transform: rotate(45deg);
  4.     overflow: hidden;
  5. }
  7. .exercise3-11 .exercise3-12 {
  8.     vertical-align: middle;
  9.     transform: rotate(-45deg) scale(1.42);
  10. }
  12. .exercise3-2 {
  13.     clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  14. }
  16. .exercise3-3 {
  17.     clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  18.     transition: 1s clip-path;
  19. }
  21. .exercise3-3:hover {
  22.     clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%)
  23. }

image.png

「@浪里淘沙的小法师」