文档章节

【css技术指南笔记】div css 实现三角形

郑二
 郑二
发布于 2015/04/10 12:34
字数 110
阅读 10
收藏 0
<style>
    .triangle{
        border:10px solid;
        border-color:transparent transparent #444 transparent;//设置一个方向有颜色,其他方向透明
        width:0;
        height:0;
    }
</style>
<div class="triangle"></>


实现一个带箭头(指向)的div框

<style>
    .talk{
        width:100px;
        height:100px;
        border:1px solid #444;
        position:relative;//方便箭头定位
    }
    .talk::after{
        content:"";
        border:10px solid;
        border-color:transparent #444 transparent transparent;
        width:0;
        height:0;
        position:absolution;
        top:50px;
        right:100%;//放到 div 的最左边
    }
</style>
<div class="talk"></div>


© 著作权归作者所有

共有 人打赏支持
郑二
粉丝 0
博文 18
码字总数 4318
作品 0
朝阳
程序员
【CSS】画三角形

270924-106.jpg 用CSS画三角形,利用border属性,把一个边设置成看到的样式,其他两边或三边用transparent方法变成透明。 image.png HTML代码: CSS代码: image.png HTML代码: CSS代码: ...

KelvinZ
2017/11/27
0
0
微信应用号开发必备技能都在这里了啦!

“微信应用号”就像平地里炸响的一声春雷,在互联网圈内炸开了锅,小代码小程序即将成为主流,H5迎来了自己的第二春。废话少说,关于微信应用号开发技能,你都掌握了吗? 没掌握的看这里,干...

咖啡
2016/09/23
0
0
基于单个 div 的 CSS 绘图

原文: Single Div Drawings with CSS 译文: 基于单个 div 的 CSS 绘图 译者: 前端外刊评论 译注:通读本文,强烈地感受到了技术与艺术的结合!赞作者的这句话:Restricting your availabl...

justjavac
2014/10/11
463
1
css实现三角形

工作中经常遇到一些tip提示,tip提示会有一个小三角形,我们可以使用图片或者iconfont实现,当然最高级的还是用css实现。下面就简单总结一下如何使用css的border属性来绘制小三角。 假设我们...

tiancai啊呆
01/10
0
0
WEB前端学习面试:用CSS画一个等边三角形

Web前端开发工程师是一个很新的职业,是从事Web前端开发工作的工程师。主要进行网站开发,优化,完善的工作。网页制作是Web 1.0时代的产物,那时网站的主要内容都是静态的,用户使用网站的行...

web前端小辰
05/30
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Thinkphp5 优雅配置两个数据库

工作需要需要配置两个数据库,框架5.0的,步骤如下: 1、在database.php同级创建一个database2.php文件 在里面配置第二个数据库信息, 2、在config中配置这个数据库信息: 3、创建第二个表的...

wqzbxh
24分钟前
2
0
Socket网络编程进阶与实战

Socket网络编程进阶与实战 Socket对于每个工程师的重要性不言而喻。本课程将理论结合实践,带你从零开始,系统学习Socket编程技术,让Socket的学习不再那么零散与难以掌握,同时会提炼出Soc...

qq__2304636824
30分钟前
2
0
Android studio常用快捷键

Ctrl +Alt +Space //显示可用参数 Ctrl + Alt +M //抽取方法 Ctrl +Alt + F //提取全局变量 Ctrl +Shift + "+或-" //折叠/展开代码块 Shift + F6 //批量更改变量 Ctrl + Tab //切换器 Ctrl +...

lanyu96
43分钟前
2
0
@ControllerAdvice 拦截异常并统一处理

在spring 3.2中,新增了@ControllerAdvice 注解,可以用于定义@ExceptionHandler、@InitBinder、@ModelAttribute,并应用到所有@RequestMapping中。 一、介绍 创建 MyControllerAdvice,并添...

狼王黄师傅
46分钟前
2
0
ajax传递参数给springmvc总结[转]

https://www.cnblogs.com/franson-2016/p/6770028.html https://www.cnblogs.com/xiaoxi/p/5708084.html 总结: 1.springmvc与Ajax交互,可以传入三种类型的数据: (1)文本:"uname=alice&......

废柴
48分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部