div+css做出帶三角的彈出框和箭頭

本文轉載自查看原文 2019-07-21 17:47 638 css

一.三角形

https://blog.csdn.net/Szu_AKer/article/details/51755821

notice：三角的那部分可以用圖片作為背景，但是容易出現雜邊。所以利用css中border做出三角形狀，原理是用border的形狀如下：

當我們設置content的寬高為0時，可想而知會出現什么效果，如下：

然后把不保留的其他boder設置顏色為透明transparent就行了。具體代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{
            position: relative;
            padding-top: 8px;
        }
        .con{
            width: 200px;
            height: 100px;
            border: 1px skyblue solid;
            border-radius: 3px;
            background-color: skyblue;
        }
        .con-ret{
            border: 7px solid transparent;
            border-bottom-color:skyblue; 
            position: absolute;
            left: 10px;
            top:-6px;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="con-ret"></div>
        <div class="con"></div>
    </div>
</body>
</html>

二. 箭頭

1.右箭頭

以下代碼實現了兩個向右的三角形

<body>
<span id="demo16">文字內容</span>
<style>
  #demo16{
  position: relative;
}
#demo16:after, #demo16:before {
  border: 10px solid transparent;
  border-left: 10px solid red;
  width: 0;
  height: 0;
  position: absolute;
  top: 0;
  right: -20px;
  content: ' '
}

#demo16:before {
  border-left-color: #fd0;
  right: -31px;
}
  </style>
</body>

將右邊三角形左移，再把第一個三角形改為白色即可得到向右的箭頭

<body>
<span id="demo16">文字內容</span>
<style>
  #demo16{
  position: relative;
}
#demo16:after, #demo16:before {
  border: 10px solid transparent;
  border-left: 10px solid #fff;
  width: 0;
  height: 0;
  position: absolute;
  top: 0;
  right: -20px;
  content: ' '
}

#demo16:before {
  border-left-color: red;
  right: -21px;
}
  </style>
</body>

下箭頭

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>空心三角形指示箭頭</title>
    <style>
   
/*第一個三角形*/
.all::before{  /*這里的偽元素用單冒號和雙冒號都一樣*/
    content: '';
    display: block;
    position: absolute;
    top: 14px;
    left: 160px;
    border-left: 8px solid transparent ;
    border-right: 8px solid transparent;
    border-top: 8px solid #555;
}

/*第二個三角形*/
.all::after{
    content: '';
    display: block;
    position: absolute;
    top: 11.6px; /*向下偏移量是矩形邊框寬度的1.4（根號2）倍，即8.4，top值為-26-（-8.4）*/
    left: 160px;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid #ececec;
}
    </style>
</head>
<body>
     <a class="all"" href="#">全部商品分類</a>
</body>
</html>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 div+css實現帶三角箭頭提示框 DIV+CSS實現左側帶三角形的提示框 css+div打造三角形(箭頭) css實現三角箭頭 div+css實現圓形div以及帶箭頭提示框效果 div+css實現導航示意箭頭 div+css制作帶箭頭提示框效果圖(原創文章) css偽類制作三角箭頭用CSS3實現帶小三角形的div框(不用圖片) 用CSS3實現帶小三角形的div框(不用圖片)

div+css做出帶三角的彈出框 和箭頭

一.三角形

免責聲明！

div+css做出帶三角的彈出框和箭頭