<!DOCTYPE html> <html> <head> <meta charset="utf-9"> <meta name="keywords" content="css,css3,实战互联网,教程"> <meta name="description" content="css3实现折角效果,折角效果,css3实战尽在实战互联网" > <link rel="stylesheet" href="styles_2014080901.css"> <title>CSS3实现折角效果实战开发</title> </head> <body> <div class="note"> </div> </body> </html>
.note { /*设置折叠样式基本属性*/ width:480px; height:400px; margin:2em auto; /*调整.note元素的外边距*/ padding:2em; background:#53A3B4; position:relative; } .note:before { content:""; display:block; /*伪元素默认是行内元素,所以如果要设定宽高,这必须显性设置为block*/ border-width:0 16px 16px 0; /*设置边框宽度*/ border-color:#fff #fff transparent transparent; background:transparent; border-style:solid; /*设置边框为固体的*/ width:0; /*设定新创建的元素*/ position:absolute; /*相对于父容器绝对定位,设置偏移父容器边框距离*/ top:0; right:0; /*设置元素的阴影效果*/ -webkit-box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2); -moz-box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2); box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2); }
效果图:
时间: 2024-08-03 07:32:46