CSS的各种形状

易山易酒易诗

已于 2022-04-28 23:30:46 修改

阅读量382

点赞数 2

分类专栏： CSS 文章标签： css

于 2022-04-27 19:30:03 首次发布

本文链接：https://blog.csdn.net/qq_44675204/article/details/124458070

版权

CSS 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

椭圆

在这里插入图片描述

  width: 100px;
  height: 150px;
  background: linear-gradient(45deg, rgb(5, 168, 222), rgb(9, 224, 9));
  border-radius: 50%;

纵向半椭圆

在这里插入图片描述

  width: 100px;
  height: 150px;
  background: linear-gradient(45deg, rgb(5, 168, 222), rgb(9, 224, 9));
  border-radius: 50% / 100% 100% 0 0;

横向半椭圆

在这里插入图片描述

  width: 100px;
  height: 150px;
  background: linear-gradient(45deg, rgb(5, 168, 222), rgb(9, 224, 9));
  border-radius: 100% 0 0 100% / 50%;

1/4椭圆

请添加图片描述

  width: 100px;
  height: 150px;
  background: linear-gradient(45deg, rgb(5, 168, 222), rgb(9, 224, 9));
  /* border-radius: 200% 0 100% 100% / 200% 100% 0 0; 和下面的等价 */
  border-radius: 100% 0 0 0;

平行四边形

请添加图片描述

  width: 150px;
  height: 100px;
  background: linear-gradient(45deg, rgb(5, 168, 222), rgb(9, 224, 9));
  transform: skewX(10deg);

菱形

请添加图片描述

  width: 300px;
  height: 200px;
  background-image: url("https://tse1-mm.cn.bing.net/th/id/OIP-C.nfC2tVNM9TgwQ5QuqECd6wHaFj?pid=ImgDet&rs=1");
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);

缺角的矩形

请添加图片描述

  width: 300px;
  height: 200px;
  background-image: linear-gradient(-45deg, white 15px, transparent 15px 100%), url("https://tse1-mm.cn.bing.net/th/id/OIP-C.nfC2tVNM9TgwQ5QuqECd6wHaFj?pid=ImgDet&rs=1");

缺四个角

请添加图片描述

  width: 300px;
  height: 200px;
  background-image: linear-gradient(-45deg, white 15px, transparent 15px 100%), 
    linear-gradient(45deg, white 15px, transparent 15px 100%), 
    linear-gradient(-135deg, white 15px, transparent 15px 100%), 
    linear-gradient(135deg, white 15px, transparent 15px 100%), 
    url("https://tse1-mm.cn.bing.net/th/id/OIP-C.nfC2tVNM9TgwQ5QuqECd6wHaFj?pid=ImgDet&rs=1");

弧型切角

请添加图片描述

  width: 300px;
  height: 200px;
  background-image: radial-gradient(circle at top left, white 15px, transparent 15px 100%), 
    radial-gradient(circle at top right, white 15px, transparent 15px 100%), 
    radial-gradient(circle at bottom left, white 15px, transparent 15px 100%), 
    radial-gradient(circle at bottom right, white 15px, transparent 15px 100%), 
    url("https://tse1-mm.cn.bing.net/th/id/OIP-C.nfC2tVNM9TgwQ5QuqECd6wHaFj?pid=ImgDet&rs=1");

梯形

请添加图片描述

  width: 300px;
  height: 200px;
  background-image: url("https://tse1-mm.cn.bing.net/th/id/OIP-C.nfC2tVNM9TgwQ5QuqECd6wHaFj?pid=ImgDet&rs=1");
  clip-path: polygon(20% 0, 80% 0, 100% 100%, 0 100%);

圆角一侧倾斜的梯形

请添加图片描述

  width: 300px;
  height: 200px;
  border: 1px solid rgba(0, 0, 0, .4);
  border-radius: 10px 10px 0 0;
  background-image: url("https://tse1-mm.cn.bing.net/th/id/OIP-C.nfC2tVNM9TgwQ5QuqECd6wHaFj?pid=ImgDet&rs=1");
  transform: perspective(100px) rotateX(5deg);
  transform-origin: bottom left;