css画带边框三角形,纯CSS画三角形（带边框）
实例一：
Title
.find-div-body{
position: relative;
top:30px;
right:0px;
width:400px;
height:200px;
padding:8px;
background-color: #FFFFFF;
border: #cccccc solid 1px;
border-radius: 3px;
}
.find-div-body:before{
box-sizing: content-box;
width: 0px;
height: 0px;
position: absolute;
top: -16px;;
right:41px;
padding:0;
border-bottom:8px solid #FFFFFF;
border-top:8px solid transparent;
border-left:8px solid transparent;
border-right:8px solid transparent;
display: block;
content:'';
z-index: 12;
}
.find-div-body:after{
box-sizing: content-box;
width: 0px;
height: 0px;
position: absolute;
top: -18px;;
right:40px;
padding:0;
border-bottom:9px solid #cccccc;
border-top:9px solid transparent;
border-left:9px solid transparent;
border-right:9px solid transparent;
display: block;
content:'';
z-index:10
}
实现的效果如下图：
实例二：
Title
.find-div-body{
position: relative;
top:30px;
left: 100px;
width:400px;
height:200px;
padding:8px;
background-color: #FFFFFF;
border: #cccccc solid 1px;
border-radius: 3px;
}
.find-div-body:before{
box-sizing: content-box;
width: 0px;
height: 0px;
position: absolute;
top: 23px;;
left: -16px;
padding:0;
border-right: 8px solid #FFFFFF;
border-top:8px solid transparent;
border-bottom: 8px solid transparent;
border-left:8px solid transparent;
display: block;
content:'';
z-index: 12;
}
.find-div-body:after{
box-sizing: content-box;
width: 0px;
height: 0px;
position: absolute;
top: 22px;;
left: -18px;
padding:0;
border-right: 9px solid #cccccc;
border-top:9px solid transparent;
border-bottom:9px solid transparent;
border-left:9px solid transparent;
display: block;
content:'';
z-index:10
}
实现的效果如下图：
标签：solid,top,边框,8px,三角形,0px,border,transparent,CSS
来源： https://www.cnblogs.com/superfeeling/p/11061631.html
css画带边框三角形,纯CSS画三角形（带边框）相关推荐
- css画圆, 如何用纯css实现一个动态画圆环效果
最终的效果是:用纯css实现动态画圆的动画效果 html结构如下: <div class="wrap"> <div class="circle" ...
- css 画小黄人,纯CSS3画出小黄人并实现动画效果
前言 前两天我刚发布了一篇CSS3实现小黄人动画的博客,但是实现的CSS3动画是基于我在站酷网找到的一张小黄人的jpg格式图片,并自己用PS抠出需要实现动画的部分,最后才完成的动画效果.但是,其实我的 ...
- html css右下角三角形,纯CSS绘制三角形（各种角度）
CSS/HTML 的 纯CSS绘制三角形(各种角度) 我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 C ...
- css 绘制三角形_解释CSS形状：如何使用纯CSS绘制圆，三角形等
css 绘制三角形 Before we start. If you want more free content but in video format. Don't miss out on my Y ...
- css 跳跃动画,如何使用纯CSS实现方块跳跃的动画（附源码）
本篇文章给大家带来的内容是关于如何使用纯CSS实现方块跳跃的动画(附源码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 效果预览 源代码下载 https://github.com/ ...
- 01超精美渐变色动态背景完整示例【CSS动效实战（纯CSS与JS动效）】
若是大一学子或者是真心想学习刚入门的小伙伴可以私聊我,若你是真心学习可以送你书籍,指导你学习,给予你目标方向的学习路线,无套路,博客为证. 本节案例如下(其他动效篇幅原因逐步讲解,欢迎三连): 一.线 ...
- css中间镂空,怎么用纯CSS实现镂空效果
怎么用纯CSS实现镂空效果 发布时间:2021-03-19 09:49:16 来源:亿速云 阅读:99 作者:小新 小编给大家分享一下怎么用纯CSS实现镂空效果,希望大家阅读完这篇文章之后都有所收获, ...
- css小三角气泡效果,纯CSS实现聊天框小尖角、气泡效果
那么,用CSS怎么实现这种效果呢?首先,来写一个简单的代码: 复制代码代码如下: .arrow { width:0; height:0; font-size:0; border:solid 10px ...
- css 实现标签切换,CSS_纯CSS实现Tab切换标签效果代码，本文实例讲述了纯CSS实现Tab切 - phpStudy...
纯CSS实现Tab切换标签效果代码 本文实例讲述了纯CSS实现Tab切换标签效果代码.分享给大家供大家参考.具体如下: 这是一款纯CSS实现的Tab简洁版,很不错的效果,希望大家喜欢. 运行效果截图如 ...
- css实现人走路效果,纯css实现机器人走路动画
纯css实现机器人走路动画 由于发现了css的这个现象 当一个有元素嵌套的时候,父元素有动画,子元素也有动画,那么子元素的运动会相对父元素的运动而运动 所以我忽然想到,实现人的走路动画并不是不可能的了 ...
最新文章
- 看看用 live write 发布日志的效果
- gcc oracle mysql_Linux下C语言访问Oracle数据库Demo
- python mysql查表_python进阶（十、mysql：单表查询）
- hdu2157：How many ways??
- php事件编程,php如何实现基于事件驱动的网络编程
- 来不及解释！python字符串常用方法大全，先收藏再说
- 数学连乘和累加运算符号_2020中考数学 初中数学有理数计算（干货）
- fastjson 1.1.31 发布，Java 的 JSON 库
- 在SQL Server 2005中实现异步触发器架构
- 21 PagerTabStrip-PagerTitleStrip-viewPager
- 请教大家, 关于 $0118 号消息
- Spring源码全解析，帮你彻底学习Spring源码
- 最好用的三款epub阅读器
- 如何按行政区划下载谷歌地图并裁剪
- Redis官方中文翻译系列 - Redis文档
- 路在脚下，却不知怎么去走？
- Xenserver命令大全
- Transformer详解
- ...startWebLogic.sh: line 202:21293 已杀死
- 使用bartender打印RFID标签如何正确写入EPCID（intermec的RFID条码打印机)