border制作带箭头的提示框等好看的效果

最新推荐文章于 2023-02-02 15:29:00 发布

fatansitic

最新推荐文章于 2023-02-02 15:29:00 发布

阅读量3k

点赞数 3

分类专栏：小三角 css标题框特效 border css html 进度条提示框带箭头提示框文章标签： border 带箭头提示框小三角 css标题框特效

本文链接：https://blog.csdn.net/fatansitic/article/details/50278313

版权

html 同时被 3 个专栏收录

6 篇文章 0 订阅

订阅专栏

css

5 篇文章 1 订阅

订阅专栏

小三角

1 篇文章 0 订阅

订阅专栏

<span style="font-family: Arial, Helvetica, sans-serif;">     </span><span style="font-family: Arial, Helvetica, sans-serif; color: rgb(204, 51, 204);">这几天在写进度条时，用到进度条提示框，效果挺好的，代码也很好懂，特来给大家分享一哈<img alt="大笑" src="http://static.blog.csdn.net/xheditor/xheditor_emot/default/laugh.gif" /></span>

进度条效果相信大家可能都会吧，就是简单的颜色填充，用js控制就好，闲话不多说，一起看一哈带箭头的进度条提示框，先看一哈效果

这是我模仿牛客网写的一个页面~

介绍一哈这个方法：

<style type="text/css">
.demo{width:100px;height:25px;background:orange;border-radius:4px;position:relative;}
.triangle{width:0;height:0;border-color:orange transparent transparent transparent;border-style:solid dashed dashed dashed;border-width:10px;position:absolute;top:20px;left:30px;}
</style>
<div class="demo">
   <span class="triangle"></span>
</div>

<span style="color:#cc33cc;"></span>

<pre name="code" class="css">这个代码兼容性方面还欠缺...大神可以帮指点指点哈

跟这个原理还有一个挺像的，大家可以看看。

code：

<h3 class="words-item"></h3>

.words-item{
    background:#EE7600;
    width:400px;
    border-right:20px solid #fff;
    border-left:20px solid #EE7600;
    border-top:20px solid #EE7600;
    border-bottom:20px solid #EE7600;
}