文档章节

【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
如何学编程,JUST DO IT!

在不知道什么是回调函数之前,Michelle Bu 做出了自己的第一个网页。他在个人博客分享了这段有趣的经历。 Michelle 有一个笔记本上涂鸦的习惯。某次夏季旅行中,他画了一系列的三角形,觉得很...

oschina
2013/03/29
7.4K
31

没有更多内容

加载失败,请刷新页面

加载更多

下一页

java并发备忘

不安全的“先检查后执行”,代码形式如下: if(条件满足){ //这里容易出现线程安全问题//doSomething}else{//doOther} 读取-修改-写入 原子操作:使用CAS技术,即首先从V中读取...

Funcy1122
今天
0
0
SpringBoot2.0 停机

最近新建了个SpringBoot2.0的项目,因为原来一直使用的是传统的Tomcat部署war包的形式,所以这次SpringBoot内置Tomcat部署jar包的时候遇到了很多问题。其中一个就是因为没有外置的Tomcat容器...

Canaan_
昨天
0
1
Confluence 6 外部参考

一个外部参考的意思是任何站点链接到你 Confluence 的实例。任何时候当 Confluence 的用户单击这个外部链接的时候,Confluence 可以记录这次单击为参考。 在默认的情况下,外部链接的参考链接...

honeymose
昨天
0
0
Android中的设计模式之抽象工厂模式

参考 《设计模式解析》 第十一章 Abstract Factory模式 《设计模式:可复用面向对象软件的基础 》3.1 Abstract Factory 抽象工厂 对象创建型模式 《Android源码设计模式解析与实战》第6章 创...

newtrek
昨天
0
0
Redis | 地理空间(GEO)的一个坑

Redis的地理空间(Geo)是个好东西,轻轻松松的就可以把地图描点的问题处理了, 最近却遇到一个坑...Redis采用的Msater-Slave模式, 运用GEORADIUS在salve读取对应的数据,新增了从节点但是从不返...

云迹
昨天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部