您的位置:果粉114 > 纯css实现小箭头或三角形标志

纯css实现小箭头或三角形标志

2023-08-24 16:10

纯css实现小箭头或三角形标志

作为一名前端工程师,工作中免不了要使用css制作一些小箭头、三角形之类的标志。下面我就来为大家分享下纯css制作小箭头、三角形等标志的方法。

实现小箭头:

.arrow{
    width: 20px;
    height: 20px;
    margin-top: 50px;
    margin-left: 50px;
    border-top: 1px solid #000;
    border-left: 1px solid #000;
    transform: rotate(45deg);
}
<div class="arrow"></div>

实现三角形:

.triangle{
    width: 0;
    height: 0;
    border-width: 100px;
    border-style: solid;
    border-color: red transparent transparent transparent;
    transform:rotate(45deg);
}
<div class="triangle"></div>

(免费视频教程:css视频教程)

如何让多个元素在一行显示?

(1)display:inline把元素转化为行内元素,但是宽高属性不起作用

(2)display:inline-block可以让元素在一行显示,但是他会受空格、换行键的影响,会有默认间距

解决办法:

1、去掉空格和换行键的影响 让标签全都在一行(这种方法不推荐,阅读性不好)

2、给加了display:inline-block属性的元素的父元素加一个属性font-size:0

display:inline-block在ie6 7下不兼容的解决办法?
dispaly:inline;//css hack ie浏览器可以识别
zoom:1;//触发css hack的layout

3、利用浮动floa:left/right,但是需要清浮动

相关推荐:CSS教程

作者:王林

阅读全文
以上是果粉114为你收集整理的 纯css实现小箭头或三角形标志全部内容。
声明:本站所有文章资源内容,如无特殊说明或标注,均为采集网络资源。如若本站内容侵犯了原著者的合法权益,可联系本站删除。
相关文章
© 2024 果粉114 gf114.com 版权所有 联系我们
桂ICP备19012293号-33 Powered by CMS