`
keimon
  • 浏览: 71974 次
  • 性别: Icon_minigender_2
  • 来自: 上海
社区版块
存档分类
最新评论

三角型的常见写法及旋转

阅读更多

三角型的常见写法,及三角的旋转

 

<style>
div{
    margin:50px;
}
.triangle{
    width:0;
    height:0;
    border-width:30px;
    border-style:solid;
    border-color:red blue yellow green;
    overflow:hidden;
}
.triangle1{
    border-width:30px;
    border-color:#000 transparent transparent transparent;
    border-style:solid dashed dashed dashed;
    width:0;
    height:0;
    overflow:hidden;
}
.triangle2{
    border-width:20px;
    border-color:#000 #000 transparent transparent;
    border-style:solid solid dashed dashed;
    width:0;
    height:0;
    overflow:hidden;
}

.triangle3{
    background: none repeat scroll 0 0 #E7E7E7;
    color: #666666;
    font: 12px/28px normal;
    height: 28px;
    position: relative;
    width: 66p
}

.triangle3:after{
    background: none repeat scroll 0 0 blue;
    color: red;
    content: ".";
    height: 12px;
    position: absolute;
    right: -3px;
    top: 7px;
    transform: rotate(45deg);
    width: 12px;
}

.triangle4{
    color:#000;
}

.outWrap{
    border: 1px solid #000;
    width: 60px;
    height: 30px;
    line-height: 30px;
    border: 1px solid #000;
}

.wrap b{
    border-width: 6px;
    border-color: #999 #fff #fff;
    border-style: solid;
    height: 0;
    line-height: 0;
    display: inline-block;
    vertical-align: text-bottom;
    font-size: 0;
    transition: transform 0.2s ease-in 0s;
    width: 0;
}

.wrap:hover b{
    border-color: red #fff #fff #fff;
    transform:rotate(180deg);
    transform-origin:50% 30%;
}
</style>
</head>

<body>
<!--利用border实现三角-->
<div class="triangle"></div>

<!--90度方向三角-->
<div class="triangle1"></div>

<!--45度方向三角-->
<div class="triangle2"></div>

<!--利用矩形转一个角度,此处内容点要与背景色一致-->
<div class="triangle3"></div>

<!--利用html中的特殊字符▲■◆等-->
<div class="triangle4">▲</div>

<!--三角的旋转-->
<div class="outWrap">
    <a class="wrap">
        222
        <b></b>
    </a>
</div>

分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics