CSS-Tooltip-arrow 绘制三角形

问题：纯CSS实现bubble的三角形部分

方法：使用border来绘制三角形；例如

 1 .trangle {
 2     width: 0;
 3     border-color: transparent;
 4     border-style: solid;
 5     background-color: #fff;
 6     border: 19px solid #666;
 7 }
 8 .trangle-up {
 9     border-width: 0 19px 35px;
10     border-bottom-color: #333333;
11 }
12 .trangle-down {
13     border-width: 35px 19px 0;
14     border-top-color: #333333;
15 }
16 .trangle-left {
17     border-width: 19px 35px 19px 0;
18     border-right-color: #333333;
19 }
20 .trangle-right {
21     border-width: 19px 0 19px 35px;
22     border-left-color: #333333;
23 }

Demo in JSFiddle

时间： 2024-08-28 02:33:23

CSS-Tooltip-arrow 绘制三角形的相关文章

CSS用border绘制三角形

使用border绘制三角形的思路,就是border值设置一个很大的值,元素自身的宽高设置为0,全部由边线占据,这样每边就会显示为四分之一块的三角形.这样不借助图片,可以直接绘制出三角形了. 一个栗子: <!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <ht

通过CSS的border绘制三角形

通过css的border 可以绘制出三角形, 不同的样式组合,有着不同的效果,可以控制它的大小,颜色,方向.看下面各种图形,相信可能还有很多图形,大家都没见过. 先写出公共的样式: 1 .border { 2 width: 0; 3 height: 0; 4 5 border-color: transparent; 6 border-width: 1rem; 7 border-style: solid; 8 } 在上面的css基础上,添加下面的组合代码,将可以控制三角形的方向: 1 border

css 利用border 绘制三角形. triangle

1.基础三角形. 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>全局css以及辅助css</title> 6 <style type="text/css"> 7 8 9 10 /***1: 初始样式设置*******/ 11 html, body, u

纯CSS绘制三角形

使用CSS绘制三角形正三角形的绘制: 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>正三角形</title> 6 <style type="text/css"> 7 #triangle-up { 8 width: 0; 9 height: 0; 10

css绘制三角形

今天看到人家用css画了一个三角形,简简单单几行代码,惊讶css其实还有很多我们不知道的东西. 三角形其实还是可以用在很多地方的.其实就那么几行代码直接贴上: div.arrow-up { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 50px solid #2f2f2f;

css绘制三角形原理

1.新建一个元素,将它的宽高都设置为0:然后通过设置border属性来实现三角形效果,下面是css绘制三角形的原理: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> .caret{ height:0;/*将宽高都设置为0*/ width:0; border:1

CSS绘制三角形的原理剖析

今天学习Bootstrap时候,看到按钮的向下三角形源码: 1 .caret { 2 display: inline-block; 3 width: 0; 4 height: 0; 5 margin-left: 2px; 6 vertical-align: middle; 7 border-top: 4px solid; 8 border-right: 4px solid transparent; 9 border-left: 4px solid transparent; 10 } 我对bord

纯CCS绘制三角形箭头图案

用CSS绘制三角形箭头.使用纯CSS,你只需要很少的代码就可以创作出各种浏览器都兼容的三角形箭头! CSS代码: /* create an arrow that points up */ div.arrow-up { width: 0; height: 0; border-left: 5px solid transparent; /* left arrow slant */ border-right: 5px solid transparent; /* right arrow slant */

CSS各种图形绘制

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>绘图</title> <style type="text/css"> div{ background:black; } /*绘正方形*/ .square{ width:100px; height:100px; } /*绘长方形*/ .retangle{ width:

石头教你如何用纯CSS3绘制三角形、箭头。

经常在有些网站上看到一些三角图形,但通常这些都是图片,现在石头就教你如何用纯css3技术来绘制三角图形. 下面是具体步骤,把这些看一遍你也就懂得怎样来绘制三角形.箭头了. 1.新建一个元素,随便什么元素,不过我习惯性的会用块元素来做.如果行内元素就display:block它. <div class="box"></div> 2.把它的宽高设置为height:0px; width:0px; 3.设置边框border属性,用来实现三角形. 首先要了解border具