CSS3尖角边框向上的实现
在Web开发中，尖角边框在设计中经常被使用，比如
菜单选项、
标签、对话框等等。而CSS3中通过使用伪元素和transform
属性，可以很方便地实现尖角边框向上。
我们可以通过为尖角边框
添加一个:before伪元素，再使用transform:rotate()
属性将其旋转45度即可。下面是
一个简单的
代码示例：
p {
position: relative;
padding: 20px;
margin: 40px;
background-color: #eee;
border: 2px solid #ddd;
}
p:before {
content: "";
display: block;
position: absolute;
top: -20px;
left: 50%;
width: 40px;
height: 40px;
background-color: #eee;
border: 2px solid #ddd;
transform: rotate(45deg);
transform-origin: center center;
z-index: -1;
}
在上面的
代码中，我们首先给p元素
添加了
一个相对定位，为其设置了一些样式，
包括背景色、边框等。然后通过为其:before伪类
添加样式来实现尖角边框的
效果。具体来说：
1. content
属性定义了:before伪类的
内容，这里为空。
2.
display:block将其设置为块级元素，使其垂直于p元素。
3. position:absolute使其脱离文档流并相对于p元素定位。
4. top:-20px表示其向上偏移20个像素。
5. left:50%将其水平居中。
6. width和height定义其宽度和高度。
7. background-color和border
属性与p元素相同，保证样式统一。
8. transform:rotate(45deg)将其旋转45度。
9. transform-origin:center center指定旋转点为中心点。
10. z-index:-1使其处于p元素下面，使其看起来像是边框。
以上就是实现CSS3尖角边框向上的
方法，通过加入:before伪类和transform
属性可以很轻松地实现尖角边框，优雅地提高了Web
页面的设计
性能。
