css 实现一个尖角_如何用CSS实现一个带尖角的框？
在elementUI中我们经常这样的组件：
对于这样的弹窗，我们很容易写出这样的一个类似的：
那么重点就放在了上面的那个尖尖怎么实现：
这个的实现我的思路是这样的：
1.画出一个这样的矩形，
2.在这个矩形的上方某个位置固定一个三角形，就像这样：
这时的代码如下：
那么如何实现elementUI中那样有阴影的情况呢？
答案是使用两个三角形，一个是阴影的颜色，一个是框内的颜色，然后第一个三角形比第二个三角形的绝对定位高出边框宽度个像素。
说起来有点难以理解，画出来就是这样：黄色就是边框的阴影
照着这个思路我们接着往下写：
此时的代码是这样的：
h2 {
width: 300px;
height: 200px;
border: 1px solid #dedcdc;
border-radius: 5px;
box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
background: white;
}
#test {
top: 69px;
left: 30px;
position: absolute;
border-width: 10px;
border-style: solid;
width: 0px;
height: 0px;
border-color: transparent;
border-bottom-color: #e0dede;
}
复制代码
最后我们在这个三角形后面再画一个位置低于它一个像素的三角形，并且设为白色:
css代码如下：
h2 {
width: 300px;
height: 200px;
border: 1px solid #dedcdc;
border-radius: 5px;
box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
background: white;
}
#test {
top: 69px;
left: 30px;
position: absolute;
border-width: 10px;
border-style: solid;
width: 0px;
height: 0px;
border-color: transparent;
border-bottom-color: #e0dede;
}
#test::after {
content: " ";
top: -9px;
left: -10px;
position: absolute;
border-width: 10px;
border-style: solid;
width: 0px;
height: 0px;
border-color: transparent;
border-bottom-color: white;
}
复制代码
css 实现一个尖角_如何用CSS实现一个带尖角的框？相关推荐
- php饼图只有一个小方块_如何用Python画一个好看的饼图
这是一个关于画一个饼图的故事......话说在一个月黑风高的夜晚,笔者肚子饿了,脑海中回想起画饼充饥的典故,于是打算.... 成功冷到自己...... 好吧进入正题,这次我们来说说怎么用python画 ...
- 怎么用css画一个心形_如何用CSS创建心形
CSS3增强了我们仅使用HTML和CSS就能在网站上构建内容的可行性. 您可以找到我们以前精选的出色示例 . 但是,不要让自己过分领先,复杂的设计将需要可能使您头疼的代码. 取而代之的是,我们将创建一 ...
- vscode如何创建一个go项目_如何用手机创建一个网站
如何用手机创建网站?其实正确的说法是如何创建一个手机网站才对,因为很难用手机去制作网站,很不方便.一般是用电脑模拟手机去建网站. 我们知道现在很多人上网都是通过手机上网,所以我们自己建网站时,也要学会 ...
- js打乱数组的顺序_如何用 js 实现一个类似微信红包的随机算法
如何用 js 实现一个类似微信红包的随机算法 js, 微信红包, 随机算法 "use strict"; /** * * @author xgqfrms * @license MIT ...
- python可视化迷宫求解_如何用 Python 制作一个迷宫游戏
相信大家都玩过迷宫的游戏,对于简单的迷宫,我们可以一眼就看出通路,但是对于复杂的迷宫,可能要仔细寻找好久,甚至耗费数天,然后可能还要分别从入口和出口两头寻找才能找的到通路,甚至也可能找不到通路. 虽然 ...
- python爬虫抢火车票_如何用python写一个简单的12306抢票软件|python 爬火车票 教程...
python 如果抓取验证码图片 类似12306的登录验证码图片 这个以前做次.最大的麻烦是码的识别算法的识别率太低.12306那种网站登陆错3次就限制你20分钟.所以除非你有33%以上的识别率否则不 ...
- python 题库自动答题,自动匹配题库_如何用python写一个从题库自动匹配的答题脚本_淘题吧...
A. web数据库题目:根据用户输入的用户名和密码于数据库中的记录是否匹配制作一个用户登录模块 http://blog.csdn.net/love_leve/article/details/43226 ...
- node.js 没有转发_如何用Nodejs编写一个定时消息提醒应用？
背景: 同事告诉我最近一段时间每天上班长时间盯着屏幕工作经常眼睛疼,问我有没有好用定时提醒功能.我受到启发,决定用nodejs来实现一个定时提醒应用. 需求分析: 同事是个程序员,熟悉命令行操作,这样 ...
- mysql kingshard 扩容_如何用Go打造一个高性能mysql proxy
kingshard架构设计和功能实现 kingshard(https://github.com/flike/kingshard)开源有一段时间了,有些热心的用户发邮件来咨询kingshard的设计和实 ...
- 怎么做一个定时消息提醒_如何用Nodejs编写一个定时消息提醒应用？
背景: 同事告诉我最近一段时间每天上班长时间盯着屏幕工作经常眼睛疼,问我有没有好用定时提醒功能.我受到启发,决定用nodejs来实现一个定时提醒应用. 需求分析: 同事是个程序员,熟悉命令行操作,这样 ...
最新文章
- CVPR2020最新论文扫描盘点（上）
- R语言使用tryCatch函数调试R代码实战：tryCatch函数运行正常R代码、tryCatch函数运行有错误（error）的R代码示例/tryCatch函数运行有警告（warning）的R代码示例
- springboot集成mybatis-generator时候遇到的问题
- 《BI那点儿事》Microsoft 决策树算法——找出三国武将特性分布，献给广大的三国爱好者们...
- 10月Web服务器调查：Apache下降 Ngnix攀升
- Exynos4412 IIC总线驱动开发（二）—— IIC 驱动开发
- LeetCode 891. 子序列宽度之和（数学）
- [数据库]-----记一次mysql分库的操作（冷热分离）
- 江西省一级计算机考试试题,2江西省计算机一级考试试题
- php 5.2 thinkphp 3.2.2 cache,查询缓存-ThinkPHP3.2.3完全开发手册
- zynq阅读文档之通过中断读GPIO输入的编程指导
- 常用BUG管理工具系统
- Tableau Server9.1.2 配置集群
- Liang Yichen
- Pandas日期时间格式化
- P0 口输出级具有能带 8个 LSTTL 门负载能力（指每个端口线例如P0.0P0.1每条位线，而不是整个P0口反证P2地址高8位，如果只能带4个怎么用）这个是门电路的扇出系数也就扇出带门负载能力
- 电路考点之电流和电压参考方向的设定
- Vue实现一个长方形少一个三角形的样式（类似两个直角梯形摞在一起的样式）
- 反射一、反射的基本概念
- 3dMax火离妖游戏模型过程