CSS揭秘（三）形状

最新推荐文章于 2024-08-20 02:15:19 发布

苘迷

最新推荐文章于 2024-08-20 02:15:19 发布

阅读量93

点赞数

分类专栏：前端文章标签： css secret

原文链接：https://www.mk2048.com/blog/blog.php?id=h02cj0jkaaaa&title=CSS%E6%8F%AD%E7%A7%98%EF%BC%88%E4%B8%89%EF%BC%89%E5%BD%A2%E7%8A%B6

版权

前端专栏收录该内容

734 篇文章 1 订阅

订阅专栏

本文详细介绍如何使用CSS创建各种形状，包括椭圆、平行四边形和饼图。通过border-radius属性掌握椭圆和半椭圆的绘制，利用transform属性实现平行四边形，并学习两种饼图的实现方法——渐变和SVG。这些技巧对于前端开发者来说至关重要。

摘要由CSDN通过智能技术生成

Chapter 3

1. 椭圆

椭圆的实现主要依靠 border-radius 属性，该属性确定边框切圆角的半径大小，可以指定数值 px，也可以使用百分比显示

而且该属性非常灵活，四个角可以分别设置

width: 200px;
height:200px;                    //正方形
--------------------------------------------------------
border-radius:100px;          //圆形
border-radius:50%/50%;     //水平半径 / 垂直半径
--------------------------------------------------------
border-radius:50px/20px;    //椭圆边角
--------------------------------------------------------
border-radius:50%/100% 100% 0 0  //半椭圆，底部垂直圆角为0时水平圆角也自动为0，无需再次指定

2. 平行四边形

平行四边形的实现依靠 transform：skew（）实现，可以自己选择倾斜的方向X轴还是Y轴

要解决的问题是：如何在容器倾斜的情况下保持内容不变？

<a href="#yolo" class="button"><div>Click me</div></a>
---------------------------------------------------
.button { transform: skewX(45deg); }
.button > div { transform: skewX(-45deg); }  //文字设置反向倾斜以抵消容器带来的倾斜

.button {
    display: inline-block;
    padding: .5em 1em;
    border: 0; margin: .5em;
    background: #58a;
    color: white;
    text-transform: uppercase;
    text-decoration: none;
    font: bold 200%/1 sans-serif;
}

.button {                                 //宿主元素
    position: relative;
    display: inline-block;
    padding: .5em 1em;
    border: 0; margin: .5em;
    background: transparent;
    color: white;
    text-transform: uppercase;
    text-decoration: none;
    font: bold 200%/1 sans-serif;
}

.button::before {                          //伪元素   
    content: ''; /* To generate the box */
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: -1;
    background: #58a;
    transform: skew(45deg);
}

//想要变形元素而不变形内容可以使用

3. 简单的饼图

饼图实现有两种方式：渐变与SVG

渐变结合伪元素实现旋转，要注意超过50%之后要反转伪元素背景色；

通过这种方式还可以做动态旋转动画，用作加载进度的显示

<div class="pie"></div>
--------------------------------------------------------------------------------------------
.pie {
    width: 100px; height: 100px;
    border-radius: 50%;
    background: yellowgreen;
    background-image: linear-gradient(to right, transparent 50%, currentColor 0);
    color: #655;
}
.pie::before {
    content: '';
    display: block;
    margin-left: 50%;
    height: 100%;
    border-radius: 0 100% 100% 0 / 50%;
    background-color: inherit;
    transform-origin: left;
    transform:rotate(0.15turn);    //设置旋转角度
}

SVG实现是先画圆和描边，然后在描边的下层再画一个更大的圆

虚线描边属性 stroke-dasharray 的第一个参数表示虚线长度，第二个为虚线之间的间隙长度

<svg width="100" height="100">
<circle r="25" cx="50" cy="50"/>
<svg>
------------------------------------------
svg {
    transform: rotate(-90deg);
    background: yellowgreen;
    border-radius: 50%;
}

circle {
    fill: yellowgreen;
    stroke: #655;
    stroke-width:50;               //该宽度为半径的两倍
    stroke-dasharray:50 160;       //第二个参数为周长
}