css 实现一个尖角_css 实现一个带尖角的正方形

实现图示的效果涉及到的知识主要有两点：一个是before、after伪元素，一个是border

1、before 和 after 都是css中的伪元素，通过给定一个属性content给元素添加新的内容

before：用来在元素前插入新内容。

after：用来在元素后面插入新内容。

(1)before 给元素添加内容实例：

我

如果给这个p元素设置一个before：p:before{ content:"爱你"; }

这个p就变成了：我爱你，content属性的值就添加到了p元素内容的前面。

(2)after 给元素添加内容实例：

我

p:after{ content:"20岁了"; }

这个p就会变成：我20岁了

2、利用伪元素设置css样式，如题目中的尖角，题目只给出一个div，只能弄出左边的带边框正方形，右边的尖角怎么来的呢？那就可以靠这个伪元素来完成了。

思路解析：

(1)先把正方形画出来#demo{

width:100px;

height:100px;

background-color:#fff;

border: 2px #000 solid;

position: relative;

}

(2)通过before或者after变出一个尖角出来。放到正方形右上角去。1)首先，我们复习一下border属性。

border-width：

thin(细边框) medium (中等边框)thick(细边框)