...虽然是一个很小的问题,但其实还是挺实用的。

实现一个边框外的角。

用纯CSS来写。

一开始实现的效果是这个样子的。

但是这个效果没有办法给他附带阴影,所以换了一种写法。实现成了这个样子

想要实现这个小三角形,不适用icon ,用纯CSS写,其实是利用了border的特性来实现的。

..之前都不晓得,后来有人告诉我之后,自己研究了一下才明白的。

虽然网上讲的人很多,但是我觉得把自己的收获记录下来才是最棒的。

我们先来看看border是什么样子的吧!

我们为一个长宽10px大小的盒子定义了30px的上下左右的边框

.border{
width: 10px;
height:10px; border-top: 30px solid red;
border-left: 30px solid blue;
border-right: 30px solid green;
border-bottom: 30px solid yellow; }

他的边框的边与边的交接是斜的!!

就是利用斜边,我们就可以画出三角形了!

首先我们将盒子归零。

然后把其中三边变透明,就可以看到一个三角形出现啦!

    .border{
width: 0px;
height:0px; border-top: 30px solid transparent;
border-left: 30px solid blue;
border-right: 30px solid transparent;
border-bottom: 30px solid transparent;
}

但是...这并不能解决边框阴影的问题,因为如果加上阴影,效果就成这个样子了。

,阴影把我刚刚隐藏起来了的边框又显现出来啦!

这个时候如果想要实现三角形的边也有阴影,其实大佬们都已经知道了...再画一个三角形就好了...

再画一个border-top ;然后把图形旋转135°,再改变box-shadow的位置,就可以实现刚刚的效果啦。

最后贴一段源码,大家可以自己去尝试尝试哦!

        .Father{
position: relative;
width: 200px;
height: 100px;
background-color: #fafafa;
box-shadow: 0 0 5px #444;
border-radius: 4px; } .ThreeC{ position: absolute; top: 30px; right: -30px; width:;
height:; border-top: 20px solid transparent; border-bottom:20px solid #fafafa;
border-left: 20px solid #fafafa; border-right: 20px solid transparent;
transform: rotate(-135deg); box-shadow: 0px 0px 5px #444;
}  
    <div class="Father">
a
<div class="ThreeC"></div>
</div>

嘿嘿,记录。方便大家看看。

CSS边框外的小三角形+阴影效果的实现。的更多相关文章

  1. 用CSS创建小三角形问题(笔试题常考)

    笔试题中经常遇到用CSS实现某个Div边框添加三角形问题,掌握一点,合理利用div的边框,当div有宽有高时,边框就是不起眼的边框,当div的宽高为0时,边框就是一个小方块,把剩下的三个边透明就是神奇 ...

  2. 如何使用CSS实现小三角形效果

    如何使用CSS实现小三角形效果:建议:尽可能的手写代码,可以有效的提高学习效率和深度.在众多的网页效果中,都有小三角形效果的应用,能够增加特定应用的美观度,下面就给出一段实例代码,里面介绍了两种实现小 ...

  3. CSS中的一下小技巧1之CSS3三角形运用

    使用CSS3实现三角形: 在前端页面中有很多时候会遇到需要三角形图案的时候,以前不知道可以用CSS3实现三角形的时候,一般都是叫UI把三角形图案切出来. 后来知道原来可以用CSS3实现三角形,可是用过 ...

  4. 通过css实现小三角形

    下面是用css做小三角形的demo, <!DOCTYPE html><html lang="en"><head> <meta charse ...

  5. HTML&CSS基础-外边框

    HTML&CSS基础-外边框  作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.HTML <!DOCTYPE html> <html> <h ...

  6. 用纯css写一个常见的小三角形

    .test{ margin:50px auto; width: 0; height: 0; overflow: hidden; border-width: 10px; border-color: #0 ...

  7. css兼容各个浏览器的三角形图标

    css兼容各个浏览器的三角形图标 在当前流行的的网站上,我们经常会看到一些小三角形的下拉提示(微博顶部的下拉菜单),简单的方式可以使用一张图片代替,但是随着前端技术的发展,以及开发者对于前端性能的“吹 ...

  8. 理解CSS边框border

    前面的话   边框是CSS盒模型属性中默默无闻的一个普通属性,CSS3的到来,但得边框属性重新焕发了光彩.本文将详细介绍CSS边框 基础样式   边框是一条以空格分隔的集合样式,包括边框粗细(边框宽度 ...

  9. CSS3做小三角形

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAXgAAAA2CAIAAABC2hVZAAAgAElEQVR4nKzcd3cbV57web+1p20FW8

随机推荐

  1. Jmeter实现MD5加密

    Jmeter3.0以后的版本不再内置MD5加密函数,只能自己写了. 1.编码 package com.liuke.test; import java.security.MessageDigest; i ...

  2. Windows Server 2008 配置IIS+PHP

    问题: 最近要上线一个PHP写成的MVC项目,发现Windows Server 2008安装的还是PHP5.2,很多语法不支持. 尝试的一些解决方案: 1.将PHP升级为5.6,但是需要做好IIS和P ...

  3. 几种常见排序算法原理&C语言实现

    一.冒泡排序(以下各法均以从小到大排序为例,定义len为数组array的长度) 原理:比较相邻元素的大小,对于每次循环,按排序的规则把最值移向数组的一端,同时循环次数依次减少. C代码实现 写法一: ...

  4. css层叠样式表

    css的三种声明方式    1.行内样式        通过每个标签都有的style属性        <div style="color:red;">黄卫星说没有内容 ...

  5. Python零基础学习系列之一--初识计算机!

    1-1.计算机概念: Computer: 原指专门负责计算的人,后来演变成特指计算设备,译为"计算机" 计算机的概念: 计算机是能够根据一组指令操作数据的机器. A compute ...

  6. jsp 之 解决 Mysql net start mysql启动,提示发生系统错误 5 拒绝访问的问题

    在dos下运行net start mysql时 !!!提示发生系统错误 5:拒绝访问!只要切换到管理员模式就可以启动了. 所以我们要以管理员身份来运行cmd程序来启动mysql. 1.在开始菜单的搜索 ...

  7. 如何关闭浏览器的HSTS功能

    在安装配置 SSL 证书时,可以使用一种能使数据传输更加安全的Web安全协议,即在服务器端上开启 HSTS (HTTP Strict Transport Security).它告诉浏览器只能通过HTT ...

  8. spring集成mybatis实现mysql读写分离

    前言 在网站的用户达到一定规模后,数据库因为负载压力过高而成为网站的瓶颈.幸运的是目前大部分的主流数据库都提供主从热备功能,通过配置两台数据库主从关系,可以将一台数据库的数据更新同步到另一台服务器上. ...

  9. JS获取字符串长度(区分中英文)

    JS获取字符串长度(区分中英文) 中文算2个字,英文一个. function getStrLength(str) {      var cArr = str.match(/[^\x00-\xff]/i ...

  10. 线索化二叉树的构建与先序,中序遍历(C++版)

    贴出学习C++数据结构线索化二叉树的过程, 方便和我一样的新手进行测试和学习 同时欢迎各位大神纠正. 不同与普通二叉树的地方会用背景色填充 //BinTreeNode_Thr.h enum Point ...