使用css(border)边框实现倒三角

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>使用border制作倒三角</title>
	</head>

	<body>

		<style>
			.arrow_01 {
				width: 0;
				height: 0;
				border: 60px solid #000;
				border-color: blue transparent transparent transparent;
			}
			.arrow_02 {
				width: 0;
				height: 0;
				border: 60px solid #000;
				border-color: transparent blue transparent transparent;

			}
			.arrow_03 {
				width: 0;
				height: 0;
				border: 60px solid #000;
				border-color: transparent transparent blue transparent;
			}
			.arrow_04 {
				width: 0;
				height: 0;
				border: 60px solid #000;
				border-color: transparent transparent transparent blue;
			}
			.arrow_05 {
				width: 0;
				height: 0;
				border: 60px solid #000;
				border-color: blue blue transparent transparent;
			}
			.arrow_06 {
				width: 0;
				height: 0;
				border: 60px solid #000;
				border-color: transparent transparent blue blue;
			}

			.arrow_07 {
				width: 0;
				height: 0;
				border: 60px solid #000;
				border-color: transparent blue blue transparent;
			}

		</style>

		<div class="arrow_01"></div>
		<div class="arrow_02"></div>
		<div class="arrow_03"></div>
		<div class="arrow_04"></div>
		<div class="arrow_05"></div>
		<div class="arrow_06"></div>
		<div class="arrow_07"></div>

	</body>

</html>

时间: 2024-11-09 00:36:10

使用css(border)边框实现倒三角的相关文章

CSS border边框属性教程(color style)

CSS 边框即CSS border-border边框样式颜色.边框样式.边框宽度的语法结构与应用案例教程篇 一.CSS 边框基础知识 CSS 边框即CSS border是控制对象的边框边线宽度.颜色.虚线.实线等样式CSS属性.同时大家可以进入码农教程提供CSS手册查看border手册:http://www.manongjc.com/cssref/pr_border.html 二.Html原始边框与DIV+CSS边框对照 Html表格控制边框:border="1" bordercolo

DIV+CSS虚线边框|CSS虚线下划线及虚线列表教程

DIV CSS虚线教程篇包括讲解常常出现的各种样式的DIV虚线案例CSS教程. 本节为大家介绍常见的CSS 虚线及DIV教程.CSS虚线下划线.列表虚线统统搞定. 目录 CSS虚线边框 CSS超链接虚线下划线 列表型CSS虚线下划线 CSS定义一条水平虚线 1.CSS边框虚线   -   TOP 这里通过边框属性的虚线边框border控制虚线.以下设置的css 高度(css height)和css 宽度(css width)为350像素是为了便于观看演示 其它意思.一.四边为虚线边框border

html+CSS实例效果(5):em实现倒三角的提示效果

<div class="c_page mt14 clearfix"> <span class="record">1/14P   134Records</span> <span class="first disable"><em class="bar"></em><em class="leftjib"></em>&

Html 中select标签的边框与右侧倒三角的去除

首先是边框的去除:可以设置属性border:none;或border:0px; 不过这还是有一个bug,不同浏览器会在选中select标签时,加上一个边框: 之后是右侧倒三角的去除:设置属性 appearance:none; 以下所有属性兼容当前主流浏览器:appearance:none; -moz-appearance:none; -ms-appearance:none; -o-appearance:none; -webkit-appearance:none; (不过对与IE浏览器这个属性好像

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

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

CSS Border(边框)

CSS Border(边框) 一.CSS 边框属性 CSS边框属性允许你指定一个元素边框的样式和颜色. 示例效果: 二.边框样式 边框样式属性指定要显示什么样的边界. border-style属性用来定义边框的样式. p.none {border-style:none;} /*无边框*/ p.dotted {border-style:dotted;} /*虚线边框*/ p.dashed {border-style:dashed;} /*虚线边框*/ p.solid {border-style:s

css border画图

css border属性竟然可以用来画图,今天项目中遇到该问题,借此有机会深入了解了下. css border属性在我的印象当中只是方方正正的东西,无非就是增加边框的宽度,变换边框的颜色,因此一直以为边框不管怎么变换都是一个长方体,这个念头今天终于可以抛弃了. 先看下普通边框效果: .border1{width:50px; height:50px; border:2px solid; border-color:#ff3300 #0000ff #339966 #00ff00;}<div class

巧用css border

上下左右边框交界处呈现平滑的斜线.利用这个特点,通过设置不同的上下左右边框宽度或颜色,可以得到小三角.梯形等. 调整宽度大小可以调节三角形形状. 实现三角形 示例1: #test1{ height:20px; width:20px; border-color:#FF9600 #3366ff #12ad2a #f0ed7a; border-style:solid; border-width:20px; } 示例2: 在上面的基础上,把高度宽度都设为0时,会呈现边界斜线. #test2 { heig

CSS border边框取值

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <st