border-radius、transitions制作同心圆、三角形

border-radius、transitions制作同心圆、三角形

**one:**同心圆:建一个正方形盒子,如此设置50%圆角时按照原盒子的长宽不至于成椭圆。用border-radius设置圆角为50%(这样才能形成正圆),设置边框粗细,小于盒子宽度则能形成同心圆。 **tow:**三角形:建一个长宽为0的盒子,设置边框的宽度和颜色,边框形成三角形

border-radius、transitions制作同心圆、三角形_第1张图片


    
    同心圆、三角形
    


    
"one">
"two">
内江师范学院过渡:将transition设置在初始状态,那么鼠标移入移出皆为设置过渡样式。

    
    Title
    


    

内江师范学院

圆角矩形:使用border-radius设置

border-radius、transitions制作同心圆、三角形_第2张图片


    
    圆角矩形
    


    
"one">
8个三角形:设置四个长宽为0的盒子,计算后设置一个定位,再设置边框颜色

border-radius、transitions制作同心圆、三角形_第3张图片


    
    8个三角形
    


"height: 200px;width: 200px;">
"shang1">
"shang2">
"xia1">
"xia2">
"big">
"shang11">
"shang22">
"xia11">
"xia22">

你可能感兴趣的:(border-radius、transitions制作同心圆、三角形)