CSS中的各种形状

最新推荐文章于 2024-05-05 23:42:05 发布

MosumLucifer

最新推荐文章于 2024-05-05 23:42:05 发布

阅读量1.1k

点赞数

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

本文链接：https://blog.csdn.net/YPJMFC/article/details/78637713

版权

CSS 专栏收录该内容

12 篇文章 1 订阅

订阅专栏

1.圆和椭圆

圆和椭圆

圆和椭圆主要还是利用border-radius属性，单位的话可以使用具体长度，也可以用百分比，当border-radius的长度是box的边长一半的时候，就可以形成一个椭圆，如果box的长宽相同的话就是一个正圆。

.circle div{
    height: 100px;
    width: 100px;
    margin-right: 20px;
    background: rgb(21, 140, 252);
}
#circle_1{  
    border-radius: 100px;
}
#circle_2{
    width:150px;
    border-radius: 50%;
    /* background: rgb(4, 175, 110); */
}

这里写图片描述

半圆和四分之一圆

想象一下，半圆其实就是同侧的两个角是圆的，另一侧两个角还是尖的,所以像这样？

#circle_3{
    border-radius: 50% 50% 0 0;
}

这里写图片描述
这是因为我们只是改变了正方形左右两角的弧度，即正方形的上半身，这个时候就要了解border-radius里水平半径和垂直半径的属性了

border-radius:100px/75px;

表示这个box的四个角的水平半径是100px，垂直半径是75px；意味着四个角是椭圆的四分之一圆弧，要造一个半圆：
顶部边缘并没有平直的部分（也就是说，整个顶边都是曲线），这意味着
左上角和右上角的半径之和应该等于整个形状的宽度；
左半径和右半径在水平方向上的值应该均为 50%；
垂直方向，似乎顶部的两个圆角占据了整个元素的高度，而且底部完全没有任何圆角。因此，在垂直方向上 border-radius 的合理值似乎就是 100% 100% 0 0。
所以：

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

这里写图片描述
四分之一就相对好理解了，只要一个角半径是100%，其他角不变就行了：

border-radius: 100% 0 0 0;

2.三角形

三角形的实现原理是好多前端面试都会遇到的问题，这里当然会把这个典型的css的形状放进来。
具体的css代码：

#triangle_1{
    width: 0;
    height: 0;
    margin-top: 20px;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid rgb(8, 240, 189);
}

其实只要记住div的四条边框是同等地位的，所以当一个div没有长宽，那么它所占的的面积就是边框的面积，所以我们可以看一下这两张图：
这里写图片描述
所以再看一下css，就能很简单的理解了其中的理解，之所以不容易想到是因为三角形其实不是div的面积，而是div边框的粗细。

3.四边形

四边形主要就是菱形，平行四边形：
平行四边形进行一个方向的倾斜就可以；
菱形保持四条边相等，box旋转45度后进行transfor的纵向或者横向拉伸；
两种都利用了transform属性。

#quardangle_1{
        transform: skew(-45deg);
}
#quardangle_1>p{
    transform:skewX(45deg);
}
#quardangle_2{
    transform: rotate(45deg);
}
#quardangle_3{
    transform: skewX(30deg);
    transform: scaleY(0.5) rotate(45deg) ;/* 先作用后面的，再作用前面的 */
}

这里写图片描述

顺带附上css中transform中的属性值：

值	描述
matrix(n,n,n,n,n,n)	定义 2D 转换，使用六个值的矩阵。
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)	定义 3D 转换，使用 16 个值的 4x4 矩阵。
translate(x,y)	定义 2D 转换。
translate3d(x,y,z)	定义 3D 转换。
translateX(x)	定义转换，只是用 X 轴的值。
translateY(y)	定义转换，只是用 Y 轴的值。
translateZ(z)	定义 3D 转换，只是用 Z 轴的值。
scale(x,y)	定义 2D 缩放转换。
scale3d(x,y,z)	定义 3D 缩放转换。
scaleX(x)	通过设置 X 轴的值来定义缩放转换。
scaleY(y)	通过设置 Y 轴的值来定义缩放转换。
scaleZ(z)	通过设置 Z 轴的值来定义 3D 缩放转换。
rotate(angle)	定义 2D 旋转，在参数中规定角度。
rotate3d(x,y,z,angle)	定义 3D 旋转。
rotateX(angle)	定义沿着 X 轴的 3D 旋转。
rotateY(angle)	定义沿着 Y 轴的 3D 旋转。
rotateZ(angle)	定义沿着 Z 轴的 3D 旋转。
skew(x-angle,y-angle)	定义沿着 X 和 Y 轴的 2D 倾斜转换。
skewX(angle)	定义沿着 X 轴的 2D 倾斜转换。
skewY(angle)	定义沿着 Y 轴的 2D 倾斜转换。
perspective(n)	为 3D 转换元素定义透视视图。

4.切角

切角利用的是线性渐变和径向渐变的属性，原理就是在box的四个角上利用透明到实色的渐变。

#corner_1{
    background: linear-gradient(135deg, transparent 15px, rgb(204, 30, 30) 0)
                top left,
                linear-gradient(-135deg, transparent 15px, rgb(204, 30, 30) 0)
                top right,
                linear-gradient(-45deg, transparent 15px, rgb(204, 30, 30) 0)
                bottom right,
                linear-gradient(45deg, transparent 15px, rgb(204, 30, 30) 0)
                bottom left;
    background-size: 50% 50%;
    background-repeat: no-repeat;

    }
#corner_2{
    background: radial-gradient(circle at top left, transparent 30px, rgb(204, 30, 30) 0)
                top left,
                radial-gradient(circle at top right, transparent 30px, rgb(204, 30, 30) 0)
                top right,
                radial-gradient(circle at bottom right, transparent 30px, rgb(204, 30, 30) 0)
                bottom right,
                radial-gradient(circle at bottom left, transparent 30px, rgb(204, 30, 30) 0)
                bottom left;
    background-size: 50% 50%;
    background-repeat: no-repeat;
}

这里写图片描述
随后奉上一个能显示背景的打孔效果的卡券：

<!DOCTYPE HTML>  
<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html" charset="utf-8" />  
<meta name="viewport" content="initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />  
<title>Stamp Demo</title>  
<style> 
body{
    background-image: linear-gradient(90deg, #ee0, #0ee); 
}
.container{
    display: flex;
    justify-content: space-around;
    align-items: center;
} 
.wrapper{
    height: 667px;
    background-image: linear-gradient(90deg, #ee0, #0ee); 
}
/* 左下 */
.raidal4 {
    height: 100px;
    width: 100px;
    background:radial-gradient(200px at left bottom,transparent 50%,white 50%);
}
/* 左上 */
.raidal1 {
    height: 100px;
    width: 100px;
    background:radial-gradient(200px at left top,transparent 50%,white 50%);
}
/* 右上 */
.raidal2 {
    height: 100px;
    width: 100px;
    background:radial-gradient(200px at right top,transparent 50%,white 50%);
}
/* 右下 */
.raidal3 {
    height: 100px;
    width: 100px;
    background:radial-gradient(200px at right bottom,transparent 50%,white 50%);
}
.middle{
    width: 159px;
    height: 200px;
    background: white;
}
.top{
    width: 100%;
    height: 200px;
    background: #fff;
}
.bottom{
    width: 100%;
    height: 200px;
    background: #fff;
}
</style>  
</head>  
<body>
    <div class="wrapper">
        <div class="top"></div>
        <div class='container'>
            <div class="left">
                <div class='raidal4'></div>
                <div class='raidal1'></div>
            </div>
            <div class="middle">
            </div>
            <div class="right">     
                <div class='raidal3'></div>  
                <div class='raidal2'></div> 
            </div> 
        </div>  
        <div class="bottom"></div>
    </div>
</body>  
</html>