css 绘制不同形状

526 阅读2分钟

css 绘制不同形状

各种形状特性

border-radius 圆与椭圆

给任何正方形元素设置一个足够大的border- radius,就可以把它变成一个圆形。 如果它的宽高相等,就显示为一个圆;如果宽 高不等,就显示为一个椭圆。

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

border-radius,有一个鲜为人知的真相:它可以单独指定水平 和垂直半径,只要用一个斜杠(/)分隔这两个值即可。它不仅可以接受长度值,还可以接受百分比值。这个特性允许我 们在拐角处创建椭圆圆角。因此,如果我们有一个尺寸为 200px×150px 的元素,就可以把它圆角的两个半径值分别指定为元素宽高的 一半,从而得到一个精确的椭圆。

background: #fb3;
width: 200px;
height: 150px;
border-radius: 100px / 75px;
border-radius: 50% / 50%;
border-radius: 50%;

background-size 条纹背景

background: linear-gradient(#fb3 50%, #58a 50%); 
background-size: 100% 30px;

transform 平行四边形

<a href="#yolo" class="button"> HTML <div>Click me</div>
</a>
.button { transform: skewX(-45deg); } 
.button > div { transform: skewX(45deg); }

// 伪元素方案

.button {
	position: relative;
	/* 其他的文字颜色、内边距等样式...... */
} 

.button::before {
	content: ''; /* 用伪元素来生成一个矩形 */ position: absolute;
	top: 0; right: 0; bottom: 0; left: 0; z-index: -1;
	background: #58a;
	transform: skew(45deg);
 }


box-shadow 投影效果

  • 第一个属性 :水平偏移
  • 第二个属性 :垂直偏移
  • 第三个属性 :模糊半径
  • 第四个属性 :扩张半径

box-shadow 鲜为人知的第四个长度参数。它排在 模糊半径参数之后,称作扩张半径。这个参数会根据你指定的值去扩大或 (当指定负值时)缩小投影的尺寸

# 单侧投影
box-shadow: 5px 0 5px -5px black,


# 邻边投影
box-shadow: 3px 3px 6px -3px black;

# 双侧投影
box-shadow: 5px 0 5px -5px black, 
				-5px 0 5px -5px black;

try

切角效果

linear-gradient(direction, color-stop1, color-stop2, ...)

默认方向是从上到下

background: #58a; 
background:linear-gradient(-45deg, transparent 15px, #58a 0);

border 三角形效果

  width: 0;
  height: 0;
  border-top: 50px solid black;
  border-right: 50px solid red;
  border-bottom: 50px solid green;
  border-left: 50px solid blue;

  width: 0;
  height: 0;
  border: 50px solid transparent;
  border-top-color: black;