css3 折角效果

CSS3_MAGIC

前几日在网上看了个css3的折角效果，感觉效果不错，就自己去尝试了下。以下是一些代码

html:

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title></title>
	<link rel="stylesheet" href="corner.css">
</head>
<body>
	<div>“The only way to get rid of a temptation is to yield to it.”
— Oscar Wilde, The Picture of Dorian Gray</div>
</body>
</html>

css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
div {
  margin: 20px auto;
  position: relative;
  width: 12em;
  background: #58a;
  background: linear-gradient(-150deg, transparent 1.5em, #58a 0);/*先制作一个右上角的斜切角*/
  padding: 2em;
  color: white;
  font: 100%/1.6 Baskerville, Palatino, serif;
  border-radius: .5em;
  border-top-left-radius: 0; }

div::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  transform-origin: bottom right;
  background: linear-gradient(to left bottom, transparent 50%, rgba(0, 0, 0, 0.4) 0) 100% 0 no-repeat;/*通过径向渐变制作小三角形*/
  width: 1.73em;
  height: 3em;
  transform: translateY(-1.3em) rotate(-30deg);/*必须先上移，后旋转*/
  border-bottom-left-radius: inherit;
  box-shadow: -0.2em 0.2em 0.3em -0.1em rgba(0, 0, 0, 0.15); }

div::after {
  content: '';
  position: absolute;
  width: 10px;
  height: 10px;
  left: -10px;
  top: 0;
  background: #58a;
  background: -webkit-radial-gradient(bottom left, circle, transparent 10px, #58a 0); /*通过径向渐变制作左边小尖角*/
}

效果如下

上面的方法先是使用了线性渐变，然后再将其上移一定距离后，以右下角为旋转点，旋转30度。有个注意点是，这里还有个三角形的计算，详情见下面这篇文章

参考自http://www.w3cplus.com/css3/css-secrets/folded-corner-effect.html

而后我又看到了另外一种实现方式，虽然用的都是渐变，但还是有所区别:

html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title></title>
	<style type="text/css" media="screen">
		.hvr-curl-top-left {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
}
.hvr-curl-top-left:before {
  pointer-events: none;
  position: absolute;
  content: '';
  height: 40px;
  width: 40px;
  top: 0;
  left: 0;
  background: white;
/*  IE9*/
  background: linear-gradient(135deg, white 45%, #aaaaaa 50%, #cccccc 56%, white 80%);
  background: gradient(135deg, white 45%, #aaaaaa 50%, #cccccc 56%, white 80%);
  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#ffffff', endColorstr='#000000');
  /*For IE7-8-9*/
  z-index: 1000;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: width, height;
  transition-property: width, height;
}

[class^="hvr-"] {
  display: inline-block;
  vertical-align: middle;
  margin: .4em;
  padding: 1em;
  cursor: pointer;
  background: #e1e1e1;
  text-decoration: none;
  color: #666;
  Prevent highlight colour when element is tapped
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}
	</style>
</head>
<body>
	<a href="#" class="hvr-curl-top-left">Curl Top Left</a>
</body>
</html>

上述方法是使用渐变梯度来折角的，并且只实现了45度的折角，不过这种方法很好的融入了动画，效果还是ok的

最后令人头疼的是，他们居然都不支持安卓手机微信，在微信里它门都无情地挂了TT，如果有谁有好的方法，请告知我，谢谢~~

本文标题:css3 折角效果

文章作者:弦冰

发布时间:2016年01月27日 - 14时14分

最后更新:2016年08月11日 - 21时50分

原始链接:http://baidu.com/2016/01/27/css3-折角效果/

许可协议: "署名-非商用-相同方式共享 3.0" 转载请保留原文链接及作者。

文章目录