详解CSS3 用border写 空心三角箭头 (两种写法)

前端  /  管理员 发布于 7年前   259

之前一直在寻找这种空心三角箭头, 终于知道了原理! 自己记录一下,顺便分享给之前跟我一样想要的撸友们~

第一种写法 利用常见的 after伪元素

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>        <style type="text/css">.arrow {    width: 20px;    height: 4px;    margin: 0 auto 7px;    border-left: 4px solid transparent;    border-right: 4px solid transparent;    border-bottom: 4px solid #343c99;    transform: rotate(45deg);    transform-origin: left;}.arrow:after {    content: '';    display: block;    width: 100%;    height: 100%;    border-left: 4px solid transparent;    border-right: 4px solid transparent;    border-top: 4px solid #343c99;    position: absolute;    right: -10px;    top: -14px;    transform: rotate(90deg);    transform-origin: bottom;}        </style>    </head>    <body>        <div class="arrow"></div>    </body></html>

第二种写法相对于比较简单

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>        <style type="text/css">/*简单*/.wb_arrow{    border-right: 2px solid #343c99;    border-top: 2px solid #343c99;    height: 10px;    width: 10px;    margin:50px auto 0;    transform: rotate(deg);    -webkit-transform: rotate(0deg);    /*不加这两个属性三角会比上一个略丑, 大家可以试一下*/    border-left: 2px solid transparent;    border-bottom: 2px solid transparent;}        </style>    </head>    <body>        <div class="wb_arrow"></div>    </body></html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。


  • 上一条：
    你所不知道的 CSS 动画技巧与细节
    下一条：
    写出牛逼的CSS代码13条建议你会哪几条

    • 昵称：

    邮箱：

    0条评论 (评论内容有缓存机制,请悉知!)
    Top

    Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号 PHP交流群

    侯体宗的博客