CSS特殊样式（二）三种css方法实现三角效果

最新推荐文章于 2023-04-02 15:32:43 发布

front_end_fan

最新推荐文章于 2023-04-02 15:32:43 发布

阅读量524

点赞数 1

分类专栏：纯CSS 特殊样式文章标签： css 特殊样式

本文链接：https://blog.csdn.net/qq_39198420/article/details/75433307

版权

纯CSS 同时被 2 个专栏收录

15 篇文章 0 订阅

订阅专栏

特殊样式

5 篇文章 0 订阅

订阅专栏

遇到对话框、信息提示框就必须要用图片吗？强大的css就不能实现吗？

“仅用css就能解决一切复杂样式问题；不用hack就能解决各浏览器的兼容性问题，此为css大神” —–赞哥

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>三种css方法实现三角效果</title>
<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<style>
* {
    padding:0;
    margin:0;
    list-style:none;
    border:0;
}
/*第一种方法*/
    .box {
    width:200px;
    height:100px;
    margin:20px auto;
    position:relative;
}
.boxcontent {
    width:198px;
    height:98px;
    border:1px solid #ccc;
}
.border-arrow {
    width:0;
    height:0;
    font-size:0;
    line-height:0;
    position:absolute;
    left:10px;
    top:-16px;
}
.border-arrow em,.border-arrow ins {
    width:0;
    height:0;
    display:block;
    position:absolute;
    border:8px solid transparent;
    border-style:dashed dashed solid dashed;
}
.border-arrow em {
    border-bottom-color:#ccc;
}
.border-arrow ins {
    border-bottom-color:#fff;
    top:1px;
}
/*第二种方法*/
    .second-arrow:before,.second-arrow:after {
    width:0;
    height:0;
    display:block;
    position:absolute;
    content:"";
    border:solid transparent;
    line-height:0;
}
.second-arrow:before {
    left:10px;
    top:-16px;
    border-bottom:solid #ccc;
    border-width:8px;
}
.second-arrow:after {
    left:9px;
    top:-15px;
    border-bottom:solid #fff;
    border-width:9px;
}
/*第三种方法*/
    .third-arrow,.third-arrow-inner {
    width:0;
    height:0;
    position:absolute;
    border:8px solid transparent;
}
.third-arrow {
    left:10px;
    top:-16px;
    border-bottom:8px solid #ccc;
}
.third-arrow-inner {
    left:-8px;
    top:-7px;
    border-bottom:8px solid #fff;
}
</style>
</head>
<body>
<!-- 第一种方法 -->
<div class="box">
  <div class="boxcontent"></div>
  <div class="border-arrow"> <em></em> <ins></ins> </div>
</div>
<!-- 第二种方法 -->
<div class="box">
  <div class="boxcontent"></div>
  <div class="second-arrow"></div>
</div>
<!-- 第三种方法 -->
<div class="box">
  <div class="boxcontent"></div>
  <div class="third-arrow">
    <div class="third-arrow-inner"></div>
  </div>
</div>
<script>
</script>
</body>
</html>

这里写图片描述

front_end_fan

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS特殊样式（二）三种css方法实现三角效果

遇到对话框、信息提示框就必须要用图片吗？强大的css就不能实现吗？“仅用css就能解决一切复杂样式；不用hack就能解决各浏览器的兼容性问题，是为css大神” —–赞哥<!doctype html><html><head><meta charset="utf-8"><title>三种css方法实现三角效果</title><scrip
复制链接

扫一扫