mshd.net
当前位置:首页 >> 三角里有数字,Css3怎么实现 >>

三角里有数字,Css3怎么实现

#s { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red;}#s span { line-height: 150px; margin-left: -25px; }120.12

div{ width: 20px; height: 20px; border: 2px solid #000; border-top: none; border-right: none; transform:rotate(45deg); }

#triangle-down { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-top: 100px solid red;}

两个DIV 然后border-radius 做两个直角三角形合在一起OK

1、新建一个html5网页,名称为index.html,在代码中写上四个div,分别是向上、向下、向左,向右四个三角形,代码如下: 2、然后新建一个css文件style.css,并在index.html中引入,引入代码: 3、先做向上的三角形,这里有两种写法,大家可以参考...

你试试用背景渐变和边框以及2d旋转来试试三角 带边线的三角*{padding:0;margin: 0;}.box{width: 400px;height: 400px;background: pink;margin: 200px;}.arrow{width: 30px;height: 30px;box-sizing: border-box;overflow: hidden;border-width:...

效果已经出来了 就是CSS设置问题, 如果字体是在同一个DIV里的话,把line-height 还有高度宽度 之类的设置一下

Document*{margin:0;padding:0;}.box {width: 200px;height: 200px;margin: 200px;background: #ccc;}.box .sjx {display: block;width: 18px;height: 18px;border-bottom: 2px solid #f00;position: relative;left: 50%;margin-left: -9px;top:...

用SVG吧。出来的效果不好。

你好,我这里用CSS实现了三种带边框三角,效果分别如图: 实例代码如下,根据你个人的情况调整代码吧: Arrow/* scale */.arrow,.arrow:after{ position: relative; display: inline-block; width: 0; height: 0; border-top: 0; border-left: 3...

网站首页 | 网站地图
All rights reserved Powered by www.mshd.net
copyright ©right 2010-2021。
内容来自网络,如有侵犯请联系客服。zhit325@qq.com