CSS实现有“边框”的下三角

CSS实现上图所示的带有边框的下三角，核心原理是用两个下三角的覆盖，位置关系用绝对定位实现。

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

* {

margin: 0;

padding: 0;

box-sizing: border-box;

}

.large {

position: absolute;

top: 16px;

left: 76px;

background-color: #fff;

width: 188px;

height: 30px;

line-height: 30px;

border: 1px solid #ccc;

font-size: 14px;

box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.3);

}

.large i {

position: absolute;

top: 28px;

left: 25px;

border: 5px solid transparent;

border-top-color: #fff;

border-style: solid dashed dashed;

}

/* 用一个白色的下三角覆盖一个灰色的下三角，看起来就像是白色的下三角有一个边框一样 */

.large em {

position: absolute;

top: 28px;

left: 23px;

border: 7px solid transparent;

border-top-color: #d8d8d8;

}

</style>

</head>

<body>

</body>

</html>

CSS实现有“边框”的下三角相关推荐

css属性基础以及wxss——居中，渐变色边框，圆角边框，横向布局，重叠div，div固定在底部，input的无边框显示下划线
text-align: center;--子item居中对齐 display: flex;--子item横向布局 -webkit-justify-content: center;--子item居中 m ...
html和css制作上三角和下三角
//html <div class="topmsg"><p class="gle"></p><a id="p ...
使用css做一个右向的三角箭头
使用css做一个右向的三角箭头:如图使用css 的border 属性,将下.左边框设置宽度为零,使用transfrom属性将图案旋转 45度.即可得到三角箭头 .icon-v-right {widt ...
纯css在div上添加小三角
纯css在div上添加小三角有些项目中会遇到这样的需求,就是div容器上要突出来一个小三角,如下图虽然在功能上没啥意义,但是人家UI就是要这个小三角,你能怎么办,咱必须给他整出来! 我们用伪类和b ...
html5用css做样式边框,纯CSS3实现自定义Tooltip边框涂鸦风格
本文作者html5tricks,转载请注明出处这是一款用纯CSS3打造的自定义Tooltip边框的应用,之前我们讨论过如何用CSS3来实现不同样式的Tooltip,今天的这款Tooltip却可以用C ...
双下划线一粗一细怎么加_css双下划线 css样式中怎样控制下划线的粗细?
html 怎么加双横线给相应的标签加一个属性border-bottom:3px double red; 如果双线间的距离要加大,把3px改为更大的值就行了,不过不能小于3px,不然就叠在一起看不出来是 ...
Jquery中css()方法获取边框长度
1. JQuery中可以使用css()方法获取块元素的边框宽度,如下: $("divMode").css("border-left-width");//左边框长 ...
php input框圆角样式,CSS如何实现边框圆角
CSS实现边框圆角需要用到CSS中的border-radius属性,下面我们就来看看CSS实现圆角边框的详细内容. 我们下来看一个没有圆角的边框实现代码这是一个框架效果如下: 接下来我们就来具体看 ...
corners边框_第11天｜16天搞定前端，CSS的圆角边框，让人赏心悦目
有人可能会疑惑,我为什么专门用一节内容来说边框和圆角.其实,不为别的,只为它们在开发中,在Web系统中,在手机页面中,太常用了.有边框的页面,让人耳目一新,一目了然:有圆角的内容,让人赏心悦目,心旷神 ...

CSS实现有“边框”的下三角

CSS实现有“边框”的下三角相关推荐

最新文章

热门文章