改变的要素
昨天那个CSS3实现折角,需要到纯色背景下才能比较完美,今天就遇到问题了…背景是渐变的;所以改良一下;
- 适用于任何背景,控制
::before
和::after
- 两个案例,第一个是适用于任何背景的,第二个增加了动画效果
效果图
代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS3实现折角效果</title>
<style media="screen">
body{
background-color: #ddca7c;
}
.title{
margin:20px;
}
.wrapper{
margin:0 auto;
width:500px;
height:300px;
background-color: #36b11d;
border-radius: 10px 10px 0 0;
font-family: monoca,"微软雅黑",sans-serif;
/*父包含块*/
position: relative;
}
.wrapper > p{
width:400px;
height:200px;
display: block;
color:#f5f5f5;
font-size:14px;
/*文字换行*/
word-wrap: break-word;
word-break: break-all;
/*内容块绝对居中*/
position: absolute;
top:50%;
left:50%;
-webkit-transform: translate(-50%,-50%);