在一个宽高为0像素的块状元素中设置border属性，例如
07 |
border-bottom:50px #F00 solid;
|
09 |
border-left:50px #03F solid;
|
11 |
border-right: 50px #F90 solid;
|
13 |
border-top:50px #6C0 solid;
|
在浏览器中的显示如图：
这样就有上下左右四个三角形了，再把除了要用的三角外的其他3个三角（border）颜色设置为背景色就ok了。
例如这样就能得到一个颜色为#CCC的向上的三角：
11 |
border:6px solid #ccc;
|
13 |
border-color:#ccc #fff;
|
15 |
border-width:0 6px 6px 6px;
|
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>用css的border属性实现三角</title>
<style type="text/css">
<!--
.box{ width:300px; height:300px; background:#CCC; position:relative; top:100px;left:100px }
.to-top{display:block; overflow:hidden; width:0px; height:0px; border:6px solid #ccc; border-color:#ccc #fff; border-width:0 6px 6px 6px; position:absolute; left:30px; top:0;margin-top:-6px;}
.to-right{display:block; overflow:hidden; width:0px; height:0px; border:6px solid #ccc; border-color:#fff #ccc; border-width:6px 0 6px 6px; position:absolute; right:0px; top:30px;margin-right:-6px;}
.to-bottom{display:block; overflow:hidden; width:0px; height:0px; border:6px solid #ccc; border-color:#ccc #fff; border-width:6px 6px 0 6px; position:absolute; right:30px; bottom:0;margin-bottom:-6px;}
.to-left{display:block; overflow:hidden; width:0px; height:0px; border:6px solid #ccc; border-color:#fff #ccc; border-width:6px 6px 6px 0 ; position:absolute; left:0; bottom:30px;margin-left:-6px;}
-->
</style>
</head>
<body>
<div class="box"><em class="to-top"></em><em class="to-right"></em><em class="to-bottom"></em><em class="to-left"></em></div>
</body>
</html>
分享到：
相关推荐
css border三角形
使用 CSS Border 属性来制作小三角非常简单，只需要了解 Border 属性的基本用法，并使用正确的样式和宽度就可以创建出漂亮的小三角。 在实际应用中，我们可以使用小三角来实现各种交互效果，例如 hover 效果、点击...
本篇文章将深入探讨如何用CSS实现三角形，并通过实例展示其在实际应用中的效果。 首先，我们要理解CSS创建三角形的基本原理。由于HTML元素默认是矩形，但我们可以通过设置元素的宽度和高度为0，同时设定不同的边框...
本篇文章将详细探讨如何利用`CSS`的`border`属性来实现一个Bubble提示框，特别是通过创建两个三角形来形成箭头。 首先，理解`CSS`中的`border`属性至关重要。`border`属性允许我们定义元素的边框，包括边框宽度、...
使用CSS的`transform`属性，可以进一步改变三角形的方向。例如，`rotate()`函数可以将三角形旋转至任何角度，从而实现不同的指向。 8. **兼容性**： 这种方法在现代浏览器中表现良好，但在一些旧版本或不支持CSS3...
标题中的“CSS学习 三角 border transparent 下拉框”是指在CSS样式设计中，如何利用边框(border)的透明属性创建三角形以及在下拉框(drop-down list)中应用这一技巧。在网页设计中，三角形通常用于指示箭头或方向，...
在本文中，我们将深入探讨如何使用纯CSS技术创建一个多彩...4. CSS3动画属性实现颜色变化 5. 使用CSS网格或Flexbox布局元素 通过巧妙地组合这些技术，我们可以创建出一个引人注目的背景墙，为网站增添独特的视觉体验。
一、前言 利用CSS的border属性可以生成一些图形，例如三角或是圆角。纯粹的CSS2的内容，没有兼容...效果抢鲜下图为使用CSS的border属性实现的三角效果： 复制代码代码如下:.test{width:0; height:0; border-width:20px
下面我们将详细讨论如何通过CSS border来实现尖三角形，并探讨其原理和拓展应用。 首先，我们来看给出的示例代码： ```html <!DOCTYPE HTML> <style type="text/css"> *{margin:0;padding:0;} body{...
实现CSS三角形的核心技巧在于利用`border-radius`、`border-color`和`border-width`属性。以下是一个基本的实现步骤： 1. 创建一个HTML元素，例如`<div>`，并给它一个固定的高度和宽度，通常设为0。 2. 设置元素的`...
在CSS世界中，创造出各种形状是一项基本技能，而“用CSS写出三角形”是一...理解边框塌陷和伪元素的使用，可以帮助开发者更好地利用CSS实现设计目标。通过实践和实验，你可以掌握更多关于如何用CSS绘制复杂形状的技巧。
/*如果想改变倒三角形的大小,就改变这里的像素值*/ border-style: solid; border-color: #666 #fff #fff #fff; /*如果倒三角形的父元素背景不是白色,就把后面三个#fff改为对应的背景色*/ top: 13px; left: 40px; /*...
本篇文章将详细介绍如何利用border属性来实现这一效果，包括两种不同的方法。 ### 第一种写法：利用伪元素 `::before` 或 `::after` 在第一种方法中，我们使用了`::after`伪元素来创建空心三角箭头。首先，我们...
这个“css小三角的做法与使用”主题深入探讨了如何仅通过CSS来创建各种形状的三角形，并且提供了文本文档和图解以帮助学习者理解。 首先，我们要了解CSS中如何创建三角形的基本原理。这是因为CSS边框不只可以是矩形...
在本例中，将分享如何使用CSS实现带圆角的三角形，并提供示例代码。这些圆角三角形可用于各种视觉设计元素中，如箭头、标签和界面提示。 首先，CSS中创建三角形的方法是利用边框（border）的特性。一个元素的边框...
在纯CSS实现中，不依赖于图片，而是使用CSS的边框属性和定位技术来创建这个效果。 首先，要理解边框属性在CSS中是如何工作的。边框属性`border`包括边框的宽度`border-width`、样式`border-style`和颜色`border-...
CSS三角形的生成主要依赖于边框（border）属性。由于边框可以独立设置宽度和颜色，当某些边框被隐藏或设置为透明时，我们可以通过控制剩余边框的宽度和颜色来创造出三角形的效果。关键在于理解边框实际上是三角形的...
本文将详细介绍如何用 CSS 实现圆角、三角形、五角星、五边形、爱心、十二角星、八角星、圆形、椭圆形、圆圈以及八卦等图形，并提供具体的代码示例。 #### 二、基础几何图形 ##### 1. 长方形 ```css #Rectangle {...