乍一看，很简单，做小三角，首先想到的是利用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——小三角带边框带阴影的更多相关文章

  1. CSS一级导航-天蓝色（带阴影）

    一款亮丽的导航,能给网站一个画龙点睛的作用.导航在指引用户搜寻内容时,还能改变用户浏览网站的心情,浏览网站也像一场旅行,有创意的导航栏让用户欣赏起来也会更加愉悦,增加对网站的兴趣. 本人不擅长美工制作 ...

  2. 边框带阴影 box-shadow

    .chosen-container-active .chosen-single { border: 1px solid #5897fb; -webkit-box-shadow: 0 0 5px rgb ...

  3. 用CSS画一个带阴影的三角形的示例代码

    1. 思路 怎么用CSS3画一个带阴影的三角形呢 ? 有童鞋说, 这还不简单吗 网上有很多解决方案, 但其实大多都是实现不太完美的, 存在一些问题 假设我们做一个向下的三角形箭头 常见的方法大致有两种 ...

  4. QT模态对话框用法（在UI文件中设置Widget背景图，这个图是一个带阴影边框的图片——酷）

    QT弹出模态对话框做法: 1.新建UI文件时,一定要选择基类是QDialog的,我的选择是:Dialog without Buttons(),如下图: 2.然后在使用的时候: MyDialog dlg ...

  5. 神探Python程序员，带你千里捉小三！（附详情代码）

    前言 本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. 作者: 王翔 清风Python PS:如有需要Python学习资料的小伙伴 ...

  6. css小随笔（二）与通用样式

    51先在学校HTML5已经有半个多月了,然后这个星期做了一个京东的手机网站,接触到了通用样式,下面以京东的手机站为例 这两个就是京东手机站了的不同的两个板块,因为HTML5仅仅只是学完了基本标签跟cs ...

  7. 上学时的HTML+JS+CSS(小总结)

    html:超文本标记语言 基本标签: { 文本标签:<pre></pre>:原封不动的保留空白区域.      <br />:换行.      <hr wid ...

  8. 前端总结·基础篇·CSS（三）补充

    前端总结系列 前端总结·基础篇·CSS(一)布局 前端总结·基础篇·CSS(二)视觉 前端总结·基础篇·CSS(三)补充 目录 一.移动端 1.1 视口(viewport) 1.2 媒体查询(medi ...

  9. CSS 小技巧

    CSS 小技巧 一.边框内圆角 我们在设计例如按钮等控件的时候,会遇到这样的设计:只有内侧有圆角,而边框或者描边的四个角还是保持直角的形状,用以下代码可以轻松的实现. #wrapper { width ...

随机推荐

  1. 【MM系列】SAP MM模块-BOM展开函数

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[MM系列]SAP MM模块-BOM展开函数   ...

  2. TCP/IP协议-1

    转载资源,链接地址https://www.cnblogs.com/evablogs/p/6709707.html

  3. ascx

    aspx是页面文件ascx是用户控件,用户控件必须嵌入到aspx中才能使用. ascx是用户控件,相当于模板 其实ascx你可以理解为Html里的一部分代码,只是嵌到aspx里而已,因为aspx内容多 ...

  4. [JS] 鼠标点击文本框清空默认值,离开文本框恢复默认值

    在使用文本框的时候,若设定了初始值,选择文本框进行输入的时候要将本来的内容进行删除,会显得非常麻烦 可以在文本框属性定义触发onfocus和onblur两个事件时对应的js功能 下面以asp.net代 ...

  5. Redis-集群操作

    一.查看集群状态 1.查看集群状态 /opt/redis/src/redis-cli -h 本机IP -p redsi实例端口 -c #连接redis实例 /opt/redis/src/redis-c ...

  6. CentOS7 策略路由配置

    环境说明:Cloud1中的GE0/0/1.GE0/0/3.GE0/0/5接口,分别与Centos7中的eth1.eth2.eth3接口桥接到同一虚拟网卡,R1,R2,R3均配置一条静态默认路由指向Ce ...

  7. 【模板】最长上升子序列(LIS)及其优化 & 洛谷 AT2827 LIS

    最长上升子序列 传送门 题意 对于给定的一个n个数的序列,找到它的一个最长的子序列,并且保证这个子序列是由低到高排序的. 例如,1 6 2 5 4 6 8的最长上升子序列为1 2 4 6 8. 基本思 ...

  8. luogu P5338 [TJOI2019]甲苯先生的滚榜

    传送门 首先,排名系统,一看就知道是原题,可以上平衡树来维护 然后考虑一种比较朴素的想法,因为我们要知道排名在一个人前面的人数,也就是AC数比他多的人数+AC数一样并且罚时少的人数,所以考虑维护那两个 ...

  9. [译]送给 ES6 开发者的7个 hack

    关注原来的 JavaScript hacks,上面有一些新的好东西.2018 使用 JavaScript 写代码真的又变得有意思了! Hack #1 — 交换变量 使用数组结构来交换值 let a = ...

  10. mysql分组查询及其测试用例

    语法: select 查询列表 from 表 [where 筛选条件] group by 分组的字段 [order by 排序的字段]; 特点: 1.和分组函数一同查询的字段必须是group by后出 ...