css实现三角的一些方法

css实现三角没有想象中的那么难,只要明白border的各种属性的意思就很好明白css三角是如何实现的。

一下是几个很简单的例子:

css三角形状的制作:

css样式:

.triangle{

width:0;

height:0;

border-left:10px solid transparent;

border-right:10px solid transparent;

border-top:10px solid red;

}  方法解释:定义 左右两边边框透明,下边框不定义,上边框定义颜色即可

此种样式是上方样式的一种变种,只需将border-left:的宽度设置大一点,代码如下:

.triangle{

width:0;

height:0;

border-left:30px solid transparent;

border-right:10px solid transparent;

border-top:10px solid red;

}

同样可以实现左箭头或者右箭头,只需要设置 border-top/border-bottom 颜色为transparent,设置一下右边框的颜色即可

.triangle{

width:0;

height: 0;
     border-top: 20px solid transparent;
     border-bottom:20px solid transparent;
     border-right:20px solid red;

}

这样的效果通过变样的方式也是可以实现的:左边颜色透明,上方和右方设置颜色,下方设置另外一种颜色

.triangle{
            width: 0;
            height: 0;
            border-width: 14px;
            border-style: solid;
            border-color: #ff1515 #ff1515 #920000 transparent;
        }

这样的三角和上面的三角的实现思路是一致的:

.triangle{

width:0;

height:0;

border-width:10px;

border-style:solid;

border-color:red red transparent transparent;

}

实现这种的带边框的三角,一般会用到两个标签div或者span i等随意的标签进行叠加,是可以实现的,还有一种算是投机取巧的方式如下:

使用2个◆符号来实现三角的形状

<span class="z">◆</span>

<span class="y">◆</span>

基本结构如下:

<div class="x">
            <p><a href="#">用面向对象的思想去书写css,用面向对象的心态去书写css。</a></p>
            <span class="z">◆</span> <span class="y">◆</span>

</div>
.x{ width:180px; position:relative; background:#fff;  border:1px solid #ccc; padding:10px; left:-4px; top:-4px;}/*内容div*/

.y , .z{position: absolute;left: 141px; }

.y{color: #ccc;font-size: 19px; top:-12px;z-index:1;}/*模拟小三角*/

.z{color: #fff;font-size: 19px;top:-11px;  z-index:3;}/*模拟小三角*/

将z中的实心菱形显示在上方,遮盖在y的实心菱形上方,所看到的三角的边框,是y元素的颜色

css实现三角的一些方法

时间: 2024-11-05 21:49:44

css实现三角的一些方法的相关文章

CSS border三角、圆角图形生成技术简介

http://www.zhangxinxu.com/wordpress/?p=794 一.前言 利用CSS的border属性可以生成一些图形,例如三角或是圆角.纯粹的CSS2的内容,没有兼容性的问题,我之前在纯CSS实现各类气球泡泡对话框效果一文中算是比较详细的讲述了CSS border属性生成三角的原理,以及实例.我觉得此技术相当实用的,故本文再次简单叙述一下,另外,本文还将展示可能并不为众人所知的CSS border圆角生成技术.好了,裹脚布的话就不说了,直接进入正题. 二.CSS bord

JQuery 加载 CSS、JS 文件的方法有哪些?

在进行web前端开发(http://www.maiziedu.com/course/web-px/)时,我们可能会需要使用JQuery加载一个外部的css文件或者js文件,加载外部文件的方法有多种,下面具体看看各种加载方法 JS 方式加载 CSS.JS 文件: //加载 css 文件function includeCss(filename) { var head = document.getElementsByTagName('head')[0]; var link = document.cre

CSS z-index 属性的使用方法和层级树的概念

CSS 中的 z-index 属性用于设置节点的堆叠顺序, 拥有更高堆叠顺序的节点将显示在堆叠顺序较低的节点前面, 这是我们对 z-index 属性普遍的认识. 与此同时, 我们总是对堆叠顺序捉摸不透, 将 z-index 的值设得很大也未必能将节点显示在最前面. 本文将通过一些例子对 z-index 的使用方法进行分析, 并且为各位带入 z-index 层级树的概念. 顺序规则 如果不对节点设定 position 属性, 位于文档流后面的节点会遮盖前面的节点. 定位规则 如果将 positio

用Jquery动态append方式加入标签时Css样式丢失的解决方法

一般在Jquery中会用下面的方式来添加新标签: var obj = "<fieldset data-role='controlgroup' data-type='vertical' data-role='fieldcontain'> <input id='menu0" type='checkbox'/><label for='menu0'> 复选框 </label> </fieldset>";  //按个人要求拼接

【转】CSS z-index 属性的使用方法和层级树的概念

文章转自:CSS z-index 属性的使用方法和层级树的概念,另外加了一点自己的注释 CSS 中的 z-index 属性用于设置节点的堆叠顺序, 拥有更高堆叠顺序的节点将显示在堆叠顺序较低的节点前面, 这是我们对 z-index 属性普遍的认识. 与此同时, 我们总是对堆叠顺序捉摸不透, 将 z-index 的值设得很大也未必能将节点显示在最前面. 本文将通过一些例子对 z-index 的使用方法进行分析, 并且为各位带入 z-index 层级树的概念. 这个星期我们团队做了一次内部的技术分享

css 定义的3种方法

1.直接在标签中使用 不推荐:只能设置为单个元素设置样式 <p style="color: red; font-size:20px">csstest1</p> 2.在当前的文件的head中定义 <style type="text/css"> p{ color: blue; background-color: yellow; } </style> 3.写一个css文件 最推荐此方式,多个html文件都可以使用. 写一个单

css 清除浮动的各种方法

1.为什么要清除浮动 在网页中,DIV一般都是嵌套的,外面称为窗口,里面的DIV存放内容,如果不浮动的话,如下面这段代码<div style=”background:#ccc;”> <div style=”float:left; width:30%; height:40px;background:#333; “> Content here</div> </div>本来我们期望看到的是,外面背景为#ccc的层包含了里面背景为#333的层,但实际上,外面的层在显

960网格布局框架(前端css框架)的使用方法

960框架总宽960px CSS框架已经出现很长时间了,关于这些框架的用处也被我们讨论了很多遍了.有人说,CSS框架不够先进,还有人说这些框架大大的节省了他们的开发时间.在此,我们将不再讨论这个问题. 前段时间,我了解到了CSS框架.经过对Malo.BluePrint和960做了实验对比后,我得出一个结论:我最喜欢960CSS框架. 本教程将解释这个框架的基本原理,这样你就可以用960来快速进入开发. 基本原理 你必须知道一些基本原理来“学习这个框架是如何工作的”.你可以通过实验(或者是用fir

css表头固定样式的方法

这篇文章主要为大家介绍了css表头固定样式的方法,涉及样式的相关操作技巧,需要的朋友可以参考下 本文实例讲述了css表头固定样式的方法.分享给大家供大家参考. 具体实现方法如下: 复制代码 代码如下: <style type="text/css">/*表头样式*/.scll {position: relative;top: expression(this.offsetParent.scrollTop);//background: url(../img/tab_15.gif)