纯CSS实现箭头

来源：互联网发布：大数据分析需要多少人编辑：程序博客网时间：2024/04/27 20:05

效果：

<!DOCTYPE html><html lang="en" class="muui-theme-webapp-main"><head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    <meta name="viewport"          content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,initial-scale=1">    <meta name="format-detection" content="telephone=no">    <meta name="apple-mobile-web-app-status-bar-style" content="white">    <meta name="apple-mobile-web-app-capable" content="no">    <title>Css arrow</title></head><style type="text/css">    #triangle-facing-right {        display: inline-block;        margin: 72px;        border-right: 24px solid; border-bottom: 24px solid;        width: 120px; height: 120px;        transform: rotate(-45deg);    }    #triangle-facing-left {        display: inline-block;        margin: 72px;        border-left: 24px solid; border-bottom: 24px solid;        width: 120px; height: 120px;        transform: rotate(45deg);    }</style><body><div id="triangle-facing-right"></div><div id="triangle-facing-left"></div></body></html>

http://codepen.io/anon/pen/EaKJgz

http://stackoverflow.com/questions/18456331/how-can-i-create-an-arrow-using-only-css

0 0