文档章节

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

郑二
 郑二
发布于 2015/04/10 12:34
字数 110
阅读 10
收藏 0
点赞 0
评论 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

微信应用号开发必备技能都在这里了啦!

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

咖啡 ⋅ 2016/09/23 ⋅ 0

基于单个 div 的 CSS 绘图

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

justjavac ⋅ 2014/10/11 ⋅ 1

减少HTTP请求

本文为《高性能网站建设指南》学习笔记! 一.图片地图 一个导航地图为一张图片,通过点击的位置坐标来跳转到相应的页面。 实现:<img usemap="#map1" boder="0" src="xx.jpg"> <map> <area sh...

michaelxv ⋅ 2012/12/10 ⋅ 0

css实现三角形

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

tiancai啊呆 ⋅ 01/10 ⋅ 0

对于css做的杂记

@charset "utf-8"; / Created by lh on 2015/6/17. 公用基础样式撰写 / /默认样式 start/ html,body,div,span,iframe,h1,h2,h3,h4,h5,h6,p,pre,a,cite,em,img,strong,b,i,dl,dt,dd,ol,ul,li,......

形参思 ⋅ 2015/06/18 ⋅ 2

如何学编程,JUST DO IT!

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

oschina ⋅ 2013/03/29 ⋅ 31

WEB前端学习面试:用CSS画一个等边三角形

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

web前端小辰 ⋅ 05/30 ⋅ 0

前端女程序员教你,花样玩转CSS,它不只是一个简单的布局!

前几天看了一篇前端技术的文章 , 颠覆了我对CSS认识,让我知道CSS不仅仅只是一个简单的布局,单标签操作也能如此美轮美奂。 于是我迫不及待想跟你们一起分享分享。 操作指南 本文中,所有的...

ToEnd ⋅ 01/11 ⋅ 0

给网页设计师的30个HTML5学习资源

早在几个星期前,Adobe就发布了Dreamweaver CS5 HTML5 Pack的预览版下载。众所周知,HTML5在互联网领域掀起了一场大论战,并让Adobe的日子很难熬。HTML5致力于为前端开发提供全面的标记语 言...

晨曦之光 ⋅ 2012/03/09 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Jenkins实践3 之脚本

#!/bin/sh# export PROJ_PATH=项目路径# export TOMCAT_PATH=tomcat路径killTomcat(){pid=`ps -ef | grep tomcat | grep java|awk '{print $2}'`echo "tom...

晨猫 ⋅ 今天 ⋅ 0

Spring Bean的生命周期

前言 Spring Bean 的生命周期在整个 Spring 中占有很重要的位置,掌握这些可以加深对 Spring 的理解。 首先看下生命周期图: 再谈生命周期之前有一点需要先明确: Spring 只帮我们管理单例模...

素雷 ⋅ 今天 ⋅ 0

zblog2.3版本的asp系统是否可以超越卢松松博客的流量[图]

最近访问zblog官网,发现zlbog-asp2.3版本已经进入测试阶段了,虽然正式版还没有发布,想必也不久了。那么作为aps纵横江湖十多年的今天,blog2.2版本应该已经成熟了,为什么还要发布这个2.3...

原创小博客 ⋅ 今天 ⋅ 0

聊聊spring cloud的HystrixCircuitBreakerConfiguration

序 本文主要研究一下spring cloud的HystrixCircuitBreakerConfiguration HystrixCircuitBreakerConfiguration spring-cloud-netflix-core-2.0.0.RELEASE-sources.jar!/org/springframework/......

go4it ⋅ 今天 ⋅ 0

二分查找

二分查找,也称折半查找、二分搜索,是一种在有序数组中查找某一特定元素的搜索算法。搜素过程从数组的中间元素开始,如果中间元素正好是要查找的元素,则搜素过程结束;如果某一特定元素大于...

人觉非常君 ⋅ 今天 ⋅ 0

VS中使用X64汇编

需要注意的是,在X86项目中,可以使用__asm{}来嵌入汇编代码,但是在X64项目中,再也不能使用__asm{}来编写嵌入式汇编程序了,必须使用专门的.asm汇编文件来编写相应的汇编代码,然后在其它地...

simpower ⋅ 今天 ⋅ 0

ThreadPoolExecutor

ThreadPoolExecutor public ThreadPoolExecutor(int corePoolSize, int maximumPoolSize, long keepAliveTime, ......

4rnold ⋅ 昨天 ⋅ 0

Java正无穷大、负无穷大以及NaN

问题来源:用Java代码写了一个计算公式,包含除法和对数和取反,在页面上出现了-infinity,不知道这是什么问题,网上找答案才明白意思是负的无穷大。 思考:为什么会出现这种情况呢?这是哪里...

young_chen ⋅ 昨天 ⋅ 0

前台对中文编码,后台解码

前台:encodeURI(sbzt) 后台:String param = URLDecoder.decode(sbzt,"UTF-8");

west_coast ⋅ 昨天 ⋅ 0

实验楼—MySQL基础课程-挑战3实验报告

按照文档要求创建数据库 sudo sercice mysql startwget http://labfile.oss.aliyuncs.com/courses/9/createdb2.sqlvim /home/shiyanlou/createdb2.sql#查看下数据库代码 代码创建了grade......

zhangjin7 ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部