同心圆:
利用css的border-radius属性
#aa{ width: 50px; height: 50px; border-radius: 75px; background-color: red; border-color: blue; border-width: 50px; border-style:solid; }
效果如下:
border-radius属性为整个div长度(width+borderwidth)的一半,即为圆
此处div宽为50,边宽为50,因此总共为150px,border-radius需要设置为75px
三角形:
利用三角形的边框绘制三角形,当div的宽高都为0,只设置border的width属性时:
#bb{ width: 0; height: 0; border-top: 50px solid black; border-right: 50px solid red; border-bottom: 50px solid blue; border-left: 50px solid orange; }
绘制一个向下的三角形:
#bb{ width: 0; height: 0; border-top: 50px solid black; border-right: 50px solid transparent; border-bottom: 50px solid transparent; border-left: 50px solid transparent; }
将其余边框设置为透明,transparent属性。
必须设置transparent属性,且设置边框显示方式为solid或者其他非none属性,否则边框无法显示。