css 各种方位三角形

css边框和相框构造是一样的,看下面这代css代码:

<div style="border-color: red blue black green;border-style: solid;border-width: 40px;height: 100px;width: 100px;"></div>

当我们把div宽度和高度设为0,看又会是怎样:

<div style="border-color: red blue black green;border-style: solid;border-width: 40px;height: 0px;width: 0px;"></div>

可以看出,四个指向的三角形已经出现了,下面以得到红色三角形为例:

第一步: 我们去掉黑色边框试试
<div style="border-color: red blue black green;border-style: solid;border-width: 40px; border-bottom:none; height: 0px;width: 0px;"></div>

第二步: 好像把左右边框去掉就ok了,我试过,其实是不是的.

可见,左右边框不能去掉...其实红色三角形占的空间大就是这么大,所以,我们没办法在大小上做控制了.换种思路,把左右边框设置成透明,就可以了..

<div style="border-color: red transparent transparent transparent;border-style: solid;border-width: 40px ; border-bottom:none; height: 0px;width: 0px;"></div>

大功已造成...不过,这是个正三角形,如果只要等腰三角形怎么办? 试试左右边框宽度吧...呵呵.

<div style="border-color:red transparent transparent transparent;border-style:solid;border-width:40px 20px 0 20px; border-bottom:none; height: 0px;width: 0px;"></div>

其他的三角形,以此类推就ok了...

css 各种方位三角形,布布扣,bubuko.com

时间： 2024-10-24 00:12:24

css 各种方位三角形的相关文章

如何使用CSS实现小三角形效果

如何使用CSS实现小三角形效果:建议:尽可能的手写代码,可以有效的提高学习效率和深度.在众多的网页效果中,都有小三角形效果的应用,能够增加特定应用的美观度,下面就给出一段实例代码,里面介绍了两种实现小三角头效果的方式.代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&

如何用css画出三角形

看到有面试题里会有问到如何用css画出三角形 众所周知好多图形都可以拆分成三角形,所以说会了画三角形就可以画出很多有意思的形状 画出三角形的原理是调整border(边框)的四个方向的宽度,线条样式以及颜色. 如果你将宽度调的足够大,改变不同方向的颜色,你就可以发现盒模型的border是四个梯形一样的线条. 这个时候如果将盒模型内部的height,width调为0px,则三角形就形成了. 1 border:100px solid transparent //边框100px,实线,透明颜色,下面三行

css实现圆角三角形例子(无图片)

css实现圆角三角形例子(无图片) 以前我们做圆角时都会要用到图片来实现,今天我给大家整理的这款css圆角效果是不需要图片的纯css实现的哦,下面我们一起来看看吧. 效果如下图所示 三角形所对方向"width: 0", 反向为三角形高度(20)"border-width: 20px", 反向颜色为三角形颜色"border-color: #eee", 其它两个方向相加为三角形宽度(30)"border-width: 15px"

css 画出三角形

技术分享不一定行文累赘 这里说说最简洁的 css 画出三角形 display: inline-block; border: 10px dashed transparent; border-left: 10px solid red; 当然,关于三角形指向这个,这里是指向右边,所以用了 border-left 左 → border-right 上 → border-bottom 下 → border-top

用css打造一个三角形箭头

用css制作一个三角形箭头 三角形我们经常用在列表.下拉提示.面包屑导航的位置,给用户以导向的引导作用,比如,在有下拉列表的地方,我们可以用向下的箭头,在列表的时候,我们能告诉用户每个列表项和下一个列表项的关系,当在面包屑导航中,能让用户了解他现在所处的栏目或者频道.我们有哪些方法来实现它呢,下面我根据我们的实际工作中的经验作了简单的总结. 第一种方案,我们可以通过使用背景图片的方式来处理,这也是我们最经常用的方法.1)单个切出三角形,我们可以根据UI设计的需求,切出与之相适应的图片,比如 ,我

Effective前端3：用CSS画一个三角形

三角形的场景很常见,打开一个页面可以看到各种各样的三角形: 由于div一般是四边形,要画个三角形并不是那么直观.你可以贴一张png,但是这种办法有点low,或者是用svg的形式,但是太麻烦.三角形其实可以用CSS画出来.如上图提到,可以分为两种三角形,一种是纯色的三角形,第二种是有边框色的三角形,先介绍最简单的纯色三角形. 1. 三角形的画法 三角形可以用border画出来,首先一个有四个border的div应该是这样的: 然后把它的高度和宽度去掉,剩下四个border,就变成了: 再把bord

CSS制作小三角形（很有用哦）

以下内容转载自:http://www.cnblogs.com/huangzhilong/p/5030659.html 预备知识 当我们设置一个div其width与height为100px,并且设置其四边框的宽度为100px,且分别设置其颜色后,我们可以看到如下的一张图片 此时如果设置这个div的height为0的话,其他不变,会得到下面这个图形 下面把其宽度也设置为0后,得到如下的一张图片 正式讲解 当我们如下设置代码并赋给div相应的属性时 [css] view plain copy #sid

用css做小三角形

刚开始学习css时发现许多web页面上的选项卡上有很多小三角形,而且鼠标hover效果时,三角形会翻转且会出现下拉列表.后来学习了bootstar前端框架,才知道可以直接从上面引用三角形图标. 但是经过一番深究,其实也可以用css做出这个小三角. .box{ width:0; height:0; border-width:6px 6px 0; border-color:green transparent transparent; border-style:solid; }即可写出一个小三角形.

三种纯css样式实现三角形

有时候要实现如下图所示的需求 这种消息提示框带了一个三角.用图片可以处理,但是,如果边框的颜色换了,或者背景换了,就需要重新制作一个,有时候是一种麻烦.为了方便修改,我们可以用纯粹的css来实现. 做三角的方法,通用有三种:1.用border属性:2.用◆符号:3.用css3的transfrom做45°旋转. 1.border属性 当我们给一个div设置样式 <style> .trangle{ width: 30px; height: 30px; border-width: 20px; bor