用css样式画三角形（提示框三角形）

转载自https://blog.csdn.net/hope_It/article/details/70217954

经常用于提示框，下拉菜单等（csdn也很多用到，最后一图）
三角形画法
html结构
<div class="triangle"> </div>
三角形画法
- 用border画出，当width、height均为100px时

    .triangle {width: 100px;height: 100px;border-left: 10px solid #7d7b7b;border-top: 10px solid #5851c3;border-right: 10px solid #21a4d6;border-bottom: 10px solid #4ed621;box-sizing: border-box;}

–>结果：
改变{width:0; height:0}–>

–>再去掉border-top—>

–>可以看见上面的一半已经没有了

–>设置左右两边border-color:transparent; –>
–>就得到了想要的三角形了，这是向上的，想要哪边就画哪边的border,并且让它相邻两边的border-color:transparent

–>代码
```
    .triangle {width: 0;height: 0;border-left: 10px solid transparent;/*border-top: 10px solid #5851c3;*/border-right: 10px solid transparent;border-bottom: 10px solid #4ed621;box-sizing: border-box;}
```
画提示框三角形（有边缘的）

如图：
原理：先画一个三角形，再画白色三角形的，调整几像素位置，覆盖掉一边
–>
代码

 .triangle {position: relative;width: 100px;height: 50px;border: 2px solid #4ed621;border-radius: 5px;}.triangle:before {position: absolute;content: "";top: -10px;left: 25px;border-left: 10px solid transparent;border-right: 10px solid transparent;border-bottom: 10px solid #4ed621;}/* 白色覆盖*/.triangle:after {position: absolute;content: "";/*减少两像素*/top: -8px;left: 25px;border-left: 10px solid transparent;border-right: 10px solid transparent;border-bottom: 10px solid #fff;}<div class="triangle"></div>

结果：
–> –>
至此，三角形画完，只用到了css2的属性，兼容性一览无余
推荐一款优秀的在线画图工具，很不错（不是广告啊！）

用css样式画三角形（提示框三角形）相关推荐

好看的css 显示 php,HTML+CSS实现好看的三角形提示框样式
在浏览网站时,大家有没有发现网站中有各式各样新颖的提示框,那你知道这些好看的提示框怎么制作的吗?这篇文章就和大家分享一个CSS实现的好看的三角形提示框,有一定的参考价值,感兴趣的朋友可以参考一下. 想 ...
html css好看的提示框,div对话框,js+div+css实现好看的提示框效果(转)
div对话框,js+div+css实现好看的提示框效果(转) (2012-02-18 20:46:23) 标签: html div css 杂谈提示窗都越来越人性化了,呵呵,有的时候老板就和你要那么 ...
html5 气泡文字提示框,css实现气泡文字提示框代码教程
css气泡文字提示框实现的等腰直角三角形式的对话框效果如下: 代码如下: css: .arrow span{border-color:#0FF #000 #f00 #ff0 ; top:0px;} ...
CSS带箭头的提示框实现
Abstract 在使用markdown编辑器写博客的时候,发现了这个提示框很好看,如下图: 图一:带箭头提示框图图二:普通提示框下面就来依次实现一下. 2. Related Da ...
用CSS样式画横线的方法
今天在做网页的时候,需要用到CSS画横线,虽然比较简单,但也出了一些小问题,拿来做个备忘. 方法一:用DIV,代码如下:(推荐此方法)<div style="width:800px;h ...
css样式美化下拉框 select 样式
本文转载自: https://www.cnblogs.com/dazhangli/p/6428039.html 作者:dazhangli 转载请注明该声明. <span class=" ...
html提示框title更改,设置title提示框的样式
默认的title不能设置样式,通过js和css实现title的功能 css样式: /*修改提示框*/ #mytitle { position: absolute; color: #ffffff; ma ...
如何使用CSS创建巧妙的动画提示框
原文:https://webdesign.tutsplus.co... 原作:Jase Smith 翻译:Stypstive 当你的用户需要漂亮的图标给出额外的文字信息时,亦或是当他们在点击了按钮之后 ...
html如何设置提示收到消息,从零开始实现一个消息提示框
引言消息提示框在实际应用场景当中比较常见,最常用的就是element ui的消息提示框,我们通常都是直接使用它们,但是我们有没有尝试过去探究其实现原理,并自己动手实现呢?为了提升我们的个人能力和竞争 ...

用css样式画三角形（提示框三角形）

三角形画法

画提示框三角形（有边缘的）

用css样式画三角形（提示框三角形）相关推荐

最新文章

热门文章