CSS中的形状

最新推荐文章于 2024-05-10 13:35:46 发布

qiaoge_QAQ

最新推荐文章于 2024-05-10 13:35:46 发布

阅读量234

点赞数

分类专栏： css自学文章标签： css

本文链接：https://blog.csdn.net/qiaoge_QAQ/article/details/108562861

版权

css自学专栏收录该内容

5 篇文章 0 订阅

订阅专栏

CSS中的形状

自适应的椭圆
平行四边形
其他形状

自适应的椭圆

椭圆

在日常的编写代码中可以发现给任何正方形元素设置一个足够大的 borderradius，就可以把它变成一个圆形

background: #fb3;
width: 200px;
height: 200px;
border-radius: 100px; /* >= 正方形边长的一半 */

要写出椭圆的形式就要将border-radius 这个属性后面的值改为百分比形式。这个百分比值会基于元素的尺寸进行解析，即宽度用于水平半径的解析，而高度用于垂直半径的解析。这意味着相同的百分比可能会计算出不同的水平和垂直半径。因此，如果要创建一个自适应的椭圆，我们可以把这两个半径值都设置为 50%：

border-radius: 50%;

最终，只需要这一行代码，我们就可以得到一个自适应的椭圆了

半椭圆

现在我们已经知道如何用 CSS 来生成一个自适应的椭圆了，接下来很自然地就会问到：我们是否还能生成其他常见的形状呢，比如椭圆的一部分？让我们先来思考一下半椭圆吧半椭圆图1
幸运的是，border-radius 的语法比我们想像中灵活得多。你可能会惊讶地发现 border-radius 原来是一个简写属性。我们可以为元素的每个角指定不同的值，而且还有两种方法可以做到这一点。第一种方法就是使用它所对应的各个展开式属性：

☑ border-top-left-radius
☑ border-top-right-radius
☑ border-bottom-right-radius
☑ border-bottom-left-radius

为 border-radius 属性分别指定4、3、2、1 个由空格分隔的值时，这些值是以这样的规律分配到四个角上的（请注意，对椭圆半径来说，斜杠前和斜杠后最多可以各有四个参数，这两组值是以同样的方法分配到各个角的）

把所有这些结论综合起来，我们就可以很容易地写出 CSS 代码，来生成图1中那样自适应的半椭圆

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

四分之一椭圆

在创建了一个完整的椭圆和半椭圆之后，很自然的下一个问题就是如何生成四分之一椭圆（其形状如图 3 所示）。延续前面所讲的思路，我们注意到，要创建一个四分之一椭圆，其中一个角的水平和垂直半径值都需要是100%，而其他三个角都不能设为圆角。由于这四个角的半径在水平和垂直方向上都是相同的，我们甚至都不需要使用斜杠语法了。最终代码应该是这样的

border-radius: 100% 0 0 0;

你不免还会顺着往下想，是不是还能用 border-radius 来生成椭圆的其他切块（比如八分之一椭圆、三分之一椭圆）？很遗憾，你可能会失望了，因为 border-radius 属性是无法生成这些形状的。

平行四边形

让我们试着用 CSS 创建一个按钮状的平行四边形链接。我们的起点就是一个普通的块状按钮，辅以一些简单的样式。然后，我们可以通过 skew() 的变形属性来对这个矩形进行斜向拉伸：

transform: skewX(-45deg);

但是，这导致它的内容也发生了斜向变形，这很不好看，而且难读（参见图 4）。有没有办法只让容器的形状倾斜，而保持其内容不变呢？

嵌套元素方案

<a href="#yolo" class="button">
 <div>Click me</div>
</a>

.button { transform: skewX(-45deg); }
.button > div { transform: skewX(45deg); }

我们在图 3-15 中可以看到，这个方法的表现很不错，但它也意味着我们不得不添加额外的 HTML 元素。
伪元素方案

.button {
 position: relative;
 /* 其他的文字颜色、内边距等样式…… */
}
.button::before {
 content: ''; /* 用伪元素来生成一个矩形 */
 position: absolute;
 top: 0; right: 0; bottom: 0; left: 0;
 z-index: -1;
 background: #58a;
 transform: skew(45deg);
}

这个技巧不仅对 skew() 变形来说很有用，还适用于其他任何变形样式，当我们想变形一个元素而不想变形它的内容时就可以用到它。举个例子，我们把这个技巧针对 rotate() 变形样式稍稍调整一下，再用到一个正方形元素上，就可以很容易地得到一个菱形。
这个技巧的关键在于，我们利用伪元素以及定位属性产生了一个方块，然后对伪元素设置样式，并将其放置在其宿主元素的下层。这种思路同样可以运用在其他场景中，从而得到各种各样的效果

其他形状

大于号

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8"> 
		<title>画图</title>
		<style type="text/css">
            .a2{
                position: absolute;
                left: 50px;
                top: 50px;
                width: 0;
                height: 0;
                border:70px solid;
                border-color: transparent transparent transparent red;     
            }
            .a1{
                position: absolute;
                left: 50px;
                top:70px;
                width: 0;
                height: 0;
                border:50px solid;
                border-color: transparent transparent transparent #fff;
            }

		</style>
	</head>
	<body> 
        <div class="a2"></div>
		<div class="a1"></div> 
	</body>
</html>

大于号

爱心

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8"> 
		<title>画图</title>
		<style type="text/css">
			.a1{
				position: absolute;
				width: 100px;
				height: 100px;
				border-radius: 100%;
				background-color: red;
			}
			.a2{
				width: 100px;
				height: 100px;
				border-radius: 100%;
				background-color: red;
				position: absolute;
				left: 75px;
			}
			.a2::after{
				position:absolute;
				left:-83px;
				top:-16px;
				content: "";
				width:100px;
            	height:100px;
            	background-color: red;
            	transform: rotate(45deg);
           		margin:50px
			}
		</style>
	</head>
	<body>
		<div class="a1"></div>
		<div class="a2"></div>
	</body>
</html>

六芒星

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8"> 
		<title>画图</title>
		<style type="text/css">
			.a1{
				width: 0;
				height: 0;
				border:40px solid;
				border-color: transparent transparent red;
			}
			.a1::after{
				content: "";
				position: absolute;
				left: 6px;
				top: 60px;
				width: 0;
				height: 0;
				border:40px solid;
				border-color:red transparent transparent ;
			}
			}
		</style>
	</head>
	<body>
		<div class="a1"></div>
		<div class="a2"></div>
	</body>
</html>

六芒星

qiaoge_QAQ

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS中的形状

CSS中的形状自适应的椭圆椭圆半椭圆四分之一椭圆平行四边形其他形状大于号爱心六芒星自适应的椭圆椭圆在日常的编写代码中可以发现给任何正方形元素设置一个足够大的 borderradius，就可以把它变成一个圆形background: #fb3;width: 200px;height: 200px;border-radius: 100px; /* >= 正方形边长的一半 */要写出椭圆的形式就要将border-radius 这个属性后面的值改为百分比形式。这个百分比值会基于元素的尺寸进行
复制链接

扫一扫