超实用CSS技巧总结（2）——形状

文章内容来自CSS神书《CSS揭秘》。

献上膝盖就好

---

1、自适应的椭圆

使用border-radius来创建椭圆，但是鲜为人知的是border-radius可以接收百分比参数以及接收两个长宽半径。（实际上border-radius的工作和border没有关系）

div {
    
    
  width: 500px;
  height: 400px;
  border: 2px solid #000;
  display: inline-block;
  margin: 10px;
}

div:nth-child(1) {
    
    
  background-color: yellow;
  border-radius: 200px 100px;
}


div:nth-child(2) {
    
    
  background-color: yellow;
  border-radius: 200px / 100px;  /*指定创建固定大小的椭圆圆角，只需要中间加上一个斜杠就可以*/
}


div:nth-child(3) {
    
    
  background-color: yellow;
  border-radius: 50% / 50%;  /*使用百分比来创建自适应大小的椭圆圆角*/
}

效果

2、半椭圆

然而border-radius远比这更加灵活，通过指定的值可以完成对每一个角的弯曲。仔细用法可以查看css手册，因此也可以指定四个角的椭圆的垂直半径和水平半径。

div:nth-child(4) {
    
    
  background-color: red;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}

div:nth-child(5) {
    
    
  background-color: red;
  border-radius: 0 0 50% 50% / 0 0 100% 100%;
}

div:nth-child(6) {
    
    
  background-color: red;
  border-radius: 100% 0 0 100% / 50% 0 0 50%;
}

效果：

甚至是四分之一椭圆：

div:nth-child(8) {
    
    
  background-color: deeppink;
  border-radius: 100% 0 0 0;
}

div:nth-child(9) {
    
    
  background-color: deeppink;
  border-radius: 0 0 0 100% / 0 0 0 100%;
} 

效果：

3、平行四边形

可以使用skew方法来进行拉伸。比如下面生成的就是一个平行四边形的按钮。

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

div:nth-child(1) {
    
    
  width: 500px;
  height: 400px;
  border: 2px solid black;
  display: inline-block;
  font-size: 30px;
  line-height: 400px;
  text-align: center;
  background-color: skyblue;
  transform: skewX(-45deg);
  margin: 300px;
}

效果：

但是这里一般来说我们不想让元素的内容发生变化，所以可以个a标签规定样式：

.button {
    
    
  transform: skewX(45deg);
  text-decoration: none;
  display: block;
}

效果：

除了这样的嵌套元素处理能够产生这样的效果，使用伪元素的方案也可以做到，并且更加通用的是，这种方式对于改变容器外形而不改变容器内容很有用。

<a class="new_button">click me</a>

.new_button {
    
    
  position: relative;
  width: 300px;
  height: 200px;
  font-size: 30px;
  line-height: 200px;
  text-align: center;
  display: inline-block;
}

.new_button::before {
    
    
  position: absolute;
  top: 0; bottom: 0; left: 0; right: 0;
  z-index: -1;
  background-color: yellow;
  content: '';
  transform: skewX(-45deg);
}

效果是一样的：

4、菱形图片效果

有的时候我们想要图片不是矩形而是各种好看的形状，菱形图片就是一种。实现的方法有两种，第一种就是简单的元素嵌套和元素变形：

<div>
<img src="https://unsplash.com/photos/WNoLnJo7tS8/download?ixid=MnwxMjA3fDB8MXxhbGx8fHx8fHx8fHwxNjY1MDM4OTUy&force=true&w=640" />
</div>

使用旋转和图片放缩效果：

div {
    
    
  width: 640px;
  height: 640px;
  overflow: hidden;
  transform: rotate(45deg);
  margin: 300px;
  border-radius: 50px;
}

div > img {
    
    
  max-width: 100%;
  transform: rotate(-45deg) scale(1.42);  /*旋转45度，并且从中心放大1.42倍*/
}

效果：

但其实还有更加好的实现的方法，没错，那就是使用clip-path属性。

img {
    
    
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
} 

实现的效果一模一样，真的很简单，其中的polygon是多边形函数。甚至可以加上动画：

img {
    
    
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  transition: 1s clip-path;
}

img:hover {
    
    
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

这样的效果就是：鼠标悬浮在头像上时，图片边框会自动回复到原来的正方形。

5、切角效果

切角是一种常见的设计风格，但是使用css实现并不简单。一般来说可以使用渐变来完成简单的切角。

div {
    
    
  width: 500px;
  height: 500px;
  display: inline-block;
  border: 2px solid black;
  margin: 10px;
}

/*斜切*/
div:nth-child(1) {
    
    
  background: linear-gradient(-45deg, transparent 10%, #58a 0) bottom right, 
              linear-gradient(45deg, transparent 10%, #58a 0) bottom left,
              linear-gradient(135deg, transparent 10%, #58a 0) top left,
              linear-gradient(-135deg, transparent 10%, #58a 0) top right;
  background-size: 50% 50%;
  background-repeat: no-repeat;
}

/*弧切*/
div:nth-child(2) {
    
    
  background: radial-gradient(circle at top left, transparent 10%, red 0) top left,
              radial-gradient(circle at top right, transparent 10%, red 0) top right,
              radial-gradient(circle at bottom left, transparent 10%, red 0) bottom left,
              radial-gradient(circle at bottom right, transparent 10%, red 0) bottom right;
  background-size: 50% 50%;
  background-repeat: no-repeat;
}

效果

书里面还推荐了一种border-image+svg实现的方法，简单说就是制作一个边框svg放到border上面。另外还有一种就是使用clip-path来实现，代码虽然简单，但是面对修改尺寸的问题时，就会尤为麻烦。

/*使用border-image和svg*/
div:nth-child(3) {
    
    
  border: 20px solid #58a;
  border-image: 1 url('data:image/svg+xml, \
    <svg xmlns="http://www.w3.org/2000/svg"\
         width="3" height="3" fill="green">\
    <polygon points="0,1 1,0 2,0 3,1 3,2 2,3 1,3 0,2"/>\
    </svg>');
/*   background: #58a; */
  background-clip: padding-box;
}


/*使用clip-path*/
div:nth-child(4) {
    
    
  background: deeppink;
  border: 3px solid black;
  clip-path: polygon(20px 0, calc(100% - 20px) 0, 100% 20px, 100% calc(100% - 20px), calc(100% - 20px) 100%, 20px 100%,
                    0 calc(100% - 20px), 0 20px);
}

效果

6、梯形的按钮

常见的按钮形式，使用css创建一个梯形是一件不简单的任务。主要思路是利用3D透视的原理来创建一个梯形。（矩形透视过去就是一个梯形）

<div class="tab">home</div>

.tab {
    
    
  position: relative;
  display: inline-block;
  padding: .5em 1em .35em;
  color: white;
}

.tab::before {
    
    
/*之前提到过的思路，使用伪元素的方法可以避免内容被变形*/
  content: '';
  position: absolute;
  top: 0; bottom: 0; left: 0; right: 0;
  z-index: -1;
  background: #58a;
  transform: scaleY(1.3) perspective(.5em) rotateX(5deg);
  transform-origin: bottom;
}

效果

简单的梯形按钮运用：

html：

<nav>
	<a href="#">Home</a>
	<a href="#" class="selected">Projects</a>
	<a href="#">About</a>
</nav>
<main>
	Content area
</main>

<nav class="left">
	<a href="#">Home</a>
	<a href="#" class="selected">Projects</a>
	<a href="#">About</a>
</nav>
<main>
	Content area
</main>

<nav class="right">
	<a href="#">Home</a>
	<a href="#" class="selected">Projects</a>
	<a href="#">About</a>
</nav>
<main>
	Content area
</main>

css:

body {
    
    
	padding: 40px;
	font: 130%/2 Frutiger LT Std, sans-serif;
}

nav {
    
    
	position: relative;
	z-index: 1;
	padding-left: 1em;
}

nav > a {
    
    
	position: relative;
	display: inline-block;
	padding: .3em 1em 0;
	color: inherit;
	text-decoration: none;
	margin: 0 -.3em;
} 

nav > a::before,
main {
    
    
	border: .1em solid rgba(0,0,0,.4);
}

nav a::before {
    
    
	content: ''; /* To generate the box */
	position: absolute;
	top: 0; right: 0; bottom: 0; left: 0;
	z-index: -1;
	border-bottom: none;
	border-radius: .5em .5em 0 0;
	background: #ccc linear-gradient(hsla(0,0%,100%,.6), hsla(0,0%,100%,0));
	box-shadow: 0 .15em white inset;
	transform: scale(1.1, 1.3) perspective(.5em) rotateX(5deg);
	transform-origin: bottom;
}

nav a.selected {
    
     z-index: 2;}

nav a.selected::before {
    
    
	background-color: #eee;
	margin-bottom: -.08em;
}

main {
    
    
	display: block;
	margin-bottom: 1em;
	background: #eee;
	padding: 1em;
	border-radius: .15em;
}

/*这里旋转理解的关键在于视角的改变*/
nav.left > a::before {
    
    
	transform: scale(1.2, 1.3) perspective(.5em) rotateX(5deg);
	transform-origin: bottom left;
}

nav.right {
    
     padding-left: 2em; }

nav.right > a::before {
    
    
	transform: scale(1.2, 1.3) perspective(.5em) rotateX(5deg);
	transform-origin: bottom right;
}

效果：

7、简单的饼图

饼图的运用十分频繁，下面就是使用css来实现饼图而不是使用图像完成。

在这里推荐使用角向渐变：

div {
    
    
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: conic-gradient(#655 15%, yellowgreen 0, yellowgreen 50%, red 0, red 75%, blue 0);
}

效果