龙空技术网

CSS 制作三角形和箭头

寒笛过霜天 68

前言:

如今你们对“向下箭头css”可能比较讲究,各位老铁们都需要知道一些“向下箭头css”的相关知识。那么小编也在网络上搜集了一些对于“向下箭头css””的相关内容,希望你们能喜欢,各位老铁们快快来学习一下吧!

三角形

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><title>三角形</title><style type="text/css">body{    background-color: pink;}div{    width: 0px;    height: 0px;    border-top: 10px solid blue;    border-right: 10px solid transparent;    border-bottom: 10px solid transparent;    border-left: 10px solid transparent;    /* 唰(忽略不计) */    /* border-width: 10px;    border-style: solid;    border-color: green orange blue pink; */}</style></head><body><div></div></body></html>

箭头

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><title>Document</title><style type="text/css">*{    margin: 0;    padding: 0;}#bigBox{    width: 0;    height: 0;    border-top: 200px solid black;    border-right: 200px solid transparent;    border-bottom: 200px solid transparent;    border-left: 200px solid transparent;}#smallBox{    width: 0;    height: 0;    border-top: 160px solid white;    border-right: 160px solid transparent;    border-bottom: 160px solid transparent;    border-left: 160px solid transparent;    position: absolute;    left: 40px;    top: 0;}</style></head><body><div id="bigBox"></div><div id="smallBox"></div></body></html>

三角形使用案例:

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style type="text/css">*{    margin: 0;    padding: 0;    list-style: none;    line-height: 40px;    cursor: pointer;}ul{    width: 200px;    margin: 0 auto;    border: 1px solid #000;}h3{    text-indent: 1em;    background-color: dodgerblue;    position: relative;}h3:before{    content: "";    width: 0;    height: 0;    border-top: 8px solid transparent;    border-right: 8px solid transparent;    border-bottom: 8px solid transparent;    border-left: 8px solid #000;    position: absolute;    left: 5px;    top: 12px;}h3.active:before{    border-top: 8px solid #000;    border-left: 8px solid transparent;    left: 0px;    top: 15px;}</style></head><body><ul><li><h3>我的好友</h3></li><li><h3 class="active">企业好友</h3></li><li><h3>黑名单</h3></li></ul></body></html>

制作箭头

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><title>Document</title><style type="text/css">*{    margin: 0;    padding: 0;}#bigBox{    width: 0;    height: 0;    border-top: 200px solid black;    border-right: 200px solid transparent;    border-bottom: 200px solid transparent;    border-left: 200px solid transparent;}#smallBox{    width: 0;    height: 0;    border-top: 160px solid white;    border-right: 160px solid transparent;    border-bottom: 160px solid transparent;    border-left: 160px solid transparent;    position: absolute;    left: 40px;    top: 0;}</style></head><body><div id="bigBox"></div><div id="smallBox"></div></body></html>

实例: 实心箭头上下左右

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>实心箭头上下左右都有哦</title></head><body><style type="text/css">/* 向上的箭头 */.arrow-top {    width: 0;    height: 0;    border-left: 10px solid transparent;    border-right: 10px solid transparent;    border-bottom: 10px solid #217AFF;    font-size: 0;    line-height: 0;}/* 向右的箭头 */.arrow-right {    width: 0;    height: 0;    border-left: 10px solid #217AFF;    border-right: 10px solid transparent;    border-bottom: 10px solid transparent;    font-size: 0;    line-height: 0;}/* 向下的箭头 */.arrow-bottom {    width: 0;    height: 0;    border-left: 4px solid transparent;    /* 左边框的宽 */    border-right: 4px solid transparent;    /* 右边框的宽 */    border-top: 7px solid #217AFF;    /* 下边框的长度|高,以及背景色 */    font-size: 0;    line-height: 0;}/* 向左的箭头 */.arrow-left {    width: 0;    height: 0;    border-left: 10px solid transparent;    border-right: 10px solid #217AFF;    border-bottom: 10px solid transparent;    font-size: 0;    line-height: 0;}</style></head><body><div class="arrow"> <span class="arrow-top"></span> <span class="arrow-right"></span> <span class="arrow-bottom"></span><span class="arrow-left"></span> </div></body></html>

标签: #向下箭头css #css3尖箭头