CSS——小三角带边框带阴影
乍一看，很简单，做小三角，首先想到的是利用border的transparent特性，可以制作出小三角的效果。但是注意，这个小三角本身就是边框制作出来的。怎么能在小三角的外边再加一层小边框呢。那就必须再叠加一层一样的东西，让两者有1px的错位。问题就解决了。不想在页面添加多余的无意义的标签，还想实现这个效果。首先想到的就是用元素的伪类来实现。
首先想到的是给小三角加一个box-shadow属性，问题就可能很轻松的解决了，可是问题往往没有那么简单。
box-shadow只加在border外边缘，跟我们想要的真的是差太多。仲么办呢？跟上面的原理差不太多，只是要用到css3中transform,把元素rotate(45deg),变成两个菱形，然后对底下的元素加box-shadow，然后用后面的元素覆盖底下的元素。代码如下：
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>小三角带边框带阴影的div——css实现效果</title>
<style>
.box2 {
float: left;
position: relative;
width: 100px;
height: 100px;
border: 1px solid red;
margin-left: 50px;
margin-right: 50px;
margin-top: 20px;
margin-bottom: 20px;
box-sizing: border-box;
font-size: 14px;
padding: 10px;
box-shadow: 0 0 2px rgba(0, 0, 0, .5)
} .box2:before,
.box2:after {
position: absolute;
content: '';
width: 14px;
height: 14px;
bottom: -8px;
left: 50%;
margin-left: -7px;
overflow: hidden;
pointer-events: none;
-webkit-transform: rotate(45deg);
-mz-transform: rotate(45deg);
transform: rotate(45deg);
} .box2:before {
background: red;
box-shadow: 1px 1px 2px rgba(0, 0, 0, .5)
} .box2:after {
bottom: -7px;
background: #fff;
}
</style>
</head> <body>
<div class="box2"></div>
</body> </html>
CSS——小三角带边框带阴影的更多相关文章
- CSS一级导航-天蓝色（带阴影）
一款亮丽的导航,能给网站一个画龙点睛的作用.导航在指引用户搜寻内容时,还能改变用户浏览网站的心情,浏览网站也像一场旅行,有创意的导航栏让用户欣赏起来也会更加愉悦,增加对网站的兴趣. 本人不擅长美工制作 ...
- 边框带阴影 box-shadow
.chosen-container-active .chosen-single { border: 1px solid #5897fb; -webkit-box-shadow: 0 0 5px rgb ...
- 用CSS画一个带阴影的三角形的示例代码
1. 思路 怎么用CSS3画一个带阴影的三角形呢 ? 有童鞋说, 这还不简单吗 网上有很多解决方案, 但其实大多都是实现不太完美的, 存在一些问题 假设我们做一个向下的三角形箭头 常见的方法大致有两种 ...
- QT模态对话框用法（在UI文件中设置Widget背景图，这个图是一个带阴影边框的图片——酷）
QT弹出模态对话框做法: 1.新建UI文件时,一定要选择基类是QDialog的,我的选择是:Dialog without Buttons(),如下图: 2.然后在使用的时候: MyDialog dlg ...
- 神探Python程序员，带你千里捉小三！（附详情代码）
前言 本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. 作者: 王翔 清风Python PS:如有需要Python学习资料的小伙伴 ...
- css小随笔（二）与通用样式
51先在学校HTML5已经有半个多月了,然后这个星期做了一个京东的手机网站,接触到了通用样式,下面以京东的手机站为例 这两个就是京东手机站了的不同的两个板块,因为HTML5仅仅只是学完了基本标签跟cs ...
- 上学时的HTML+JS+CSS(小总结)
html:超文本标记语言 基本标签: { 文本标签:<pre></pre>:原封不动的保留空白区域. <br />:换行. <hr wid ...
- 前端总结·基础篇·CSS（三）补充
前端总结系列 前端总结·基础篇·CSS(一)布局 前端总结·基础篇·CSS(二)视觉 前端总结·基础篇·CSS(三)补充 目录 一.移动端 1.1 视口(viewport) 1.2 媒体查询(medi ...
- CSS 小技巧
CSS 小技巧 一.边框内圆角 我们在设计例如按钮等控件的时候,会遇到这样的设计:只有内侧有圆角,而边框或者描边的四个角还是保持直角的形状,用以下代码可以轻松的实现. #wrapper { width ...
随机推荐
- 12.持久性后门----Ettercap之ARP中毒----RAR/ZIP & linux密码破解----kali上检测rootkits
持久性后门 生成PHP shell weevely generate 密码 /root/Desktop/404.php 靶机IP/404.php weevely http://192.168.1.10 ...
- 红帽学习笔记[RHCSA] 第八课[Nice值、时间同步、RPM与Yum软件安装]
第八课 nice值 什么是nice值 给进程设置的优先级就是nice.nice的范围是-20~20.nice值越小占用的系统资源就越多,就是这个进程不nice. 如何查看nice值 # 使用top命令 ...
- [DS+Algo] 008 查找
1. 常见搜索方法 顺序查找 最优时间复杂度:O(1) 最坏时间复杂度:O(n) 二分法 最优时间复杂度:O(1) 最坏时间复杂度:O(logn) 二叉树 若是"二叉搜索树" 最优 ...
- Oracle 查看一个数据库实例下面所有的表大小
1. 因为 oracle有一些 lob字段 在user_extents 里面取出来的结果不是表名, 所以需要与user_lobs 表做关联查询才可以 本来想通过 关联查询来实现, 发现字表查询更简单 ...
- [19/10/16-星期三] Python中的模块和包、异常、操作文件
一.模块 # 模块(module) # 模块化,模块化指将一个完整的程序分解为一个一个小的模块 # 通过将模块组合,来搭建出一个完整的程序 # 不采用模块化,统一将所有的代码编写到一个文件中 # 采用 ...
- DateHandler日期处理工具(JSP中使用后台工具类)
1.DateHandler.java package Utils.dateHandler; import java.text.ParseException; import java.text.Simp ...
- 为什么你的javascript学了这么久，水平还是烂成了渣？
今年我给公司面试时,面试了百来个人,水平我就呵呵了,还觉得自己学了很久很厉害了,其实呢,渣的很呀,这篇文章送给想学好javascript找份工作的同学们. 首先要说明的是,咱现在不是高手,最多还是一个 ...
- [BZOJ 3509] [CodeChef] COUNTARI (FFT+分块)
[BZOJ 3509] [CodeChef] COUNTARI (FFT+分块) 题面 给出一个长度为n的数组,问有多少三元组\((i,j,k)\)满足\(i<j<k,a_j-a_i=a_ ...
- CSP-S全国模拟赛第二场 【nan】
A.count 本场比赛最难的题... 隔板法组合数容斥 xjb 搞搞就好了 //by Judge #include<cstdio> #include<iostream> #d ...
- jQuery进阶第三天（2019 10.12）
一.原生JS快捷的尺寸(属性)(注意这些属性的结果 不带PX单位) clientWidth/clientHeight =====> 获得元素content+padding的宽/高: offse ...