纯CSS绘制三角形（各种角度）

我们的网页因为 CSS 而呈现千变万化的风格。这一看似简单的样式语言在使用中非常灵活，只要你发挥创意就能实现很多比人想象不到的效果。特别是随着 CSS3 的广泛使用，更多新奇的 CSS 作品涌现出来。

今天给大家带来 CSS 三角形绘制方法



代码如下:

#triangle-up {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid red;
}




代码如下:

#triangle-down {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 100px solid red;
}




代码如下:

#triangle-left {
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-right: 100px solid red;
    border-bottom: 50px solid transparent;
}




代码如下:

#triangle-right {
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-left: 100px solid red;
    border-bottom: 50px solid transparent;
}




代码如下:

#triangle-topleft {
    width: 0;
    height: 0;
    border-top: 100px solid red;
    border-right: 100px solid transparent;
}




代码如下:

#triangle-topright {
    width: 0;
    height: 0;
    border-top: 100px solid red;
    border-left: 100px solid transparent; 
}




代码如下:

#triangle-bottomleft {
    width: 0;
    height: 0;
    border-bottom: 100px solid red;
    border-right: 100px solid transparent;
}




代码如下:

#triangle-bottomright {
    width: 0;
    height: 0;
    border-bottom: 100px solid red;
    border-left: 100px solid transparent;
}

赞 (0)

相关推荐

  • C#打印出正等腰三角形实例代码

    C#打印出正等腰三角形实例代码

    复制代码 代码如下: using System;using System.Collections.Generic;using System.Linq;using System.Text; namespace 打印正三角{    class Program    {        static void Main(string[] args)        { Console.WriteLine("请输入要打印的行数:");            int n=Convert.ToInt3

  • Android编程开发之在Canvas中利用Path绘制基本图形(圆形,矩形,椭圆,三角形等)

    Android编程开发之在Canvas中利用Path绘制基本图形(圆形,矩形,椭圆,三角形等)

    本文实例讲述了Android编程开发之在Canvas中利用Path绘制基本图形的方法.分享给大家供大家参考,具体如下: 在Android中绘制基本的集合图形,本程序就是自定义一个View组件,程序重写该View组件的onDraw(Canvase)方法,然后在该Canvas上绘制大量的基本的集合图形. 直接上代码: 1.自定义的View组件代码: package com.infy.configuration; import android.content.Context; import andro

  • 使用css实现全兼容浏览器的三角形

    使用css实现全兼容浏览器的三角形

    在当前流行的的网站上,我们经常会看到一些小三角形的下拉提示(微博顶部的下拉菜单),简单的方式可以使用一张图片代替,但是随着前端技术的发展,以及开发者对于前端性能的"吹毛求疵",越来越多的前端开发者开始"返璞归真",在能不使用图片的场景中减少图片使用,css图标相对于图片还有个优势是我们可以方便的定制图标的大小以及颜色. css实现三角形图标已不是什么新鲜技术,之前也有很多相关的技术文章,这篇文章主要是分析下在实际场景中使用时遇到的问题以及如何回避这些问题. 基本原理

  • php使用for语句输出三角形的方法

    本文实例讲述了php使用for语句输出三角形的方法.分享给大家供大家参考.具体实现方法如下: <?php //phpinfo(); function Dis($num) { if($num<=0) return; $tmpRow=0; for($i=1;$i<=$num;$i++) { $tmpRow=$i<=$num/2 ? $i:$num-$i+1; echo str_repeat('*',2*$tmpRow-1).'<br />'; } } Dis(19); ?&

  • java用接口、多态、继承、类计算三角形和矩形周长及面积的方法

    本文实例讲述了java用接口.多态.继承.类计算三角形和矩形周长及面积的方法.分享给大家供大家参考.具体如下: 定义接口规范: /** * @author vvv * @date 2013-8-10 上午08:56:48 */ package com.duotai; /** * * */ public interface Shape { public double area(); public double longer(); } /** * @author vvv * @date 2013-8

  • c语言计算三角形面积代码

    复制代码 代码如下: //面积公式s = (a+b+c) / 2   area = sqrt(s * (s - a) * (s - b) * (s - c));//小作业 求三角形的面积 int check(double a);int check2(double a, double b, double c); #include <stdio.h>#include <math.h>int main(void){    double area = 0;    double s;   

  • Android基于OpenGL在GLSurfaceView上绘制三角形及使用投影和相机视图方法示例

    本文实例讲述了Android基于OpenGL在GLSurfaceView上绘制三角形及使用投影和相机视图方法.分享给大家供大家参考,具体如下: 定义三角形 OpenGL 允许我们使用三维坐标来定义物体.在绘制三角形前,我们需要定义它各个点的坐标.我们一般使用数组来存储各个顶点的坐标. OpenGL ES 默认 [0,0,0] (X,Y,Z) 在GLSurfaceView的中心,[1,1,0]在右上角,[-1,-1,0]在左下角. 绘制三角形 在绘制三角形之前,我们必须告诉OpenGL我们正在使用

  • Android OpenGLES2.0绘制三角形（二）

    Android OpenGLES2.0绘制三角形（二）

    选择绘制三角形作为OpenGL ES 2.0的第一个实例,是因为前文中提到的,点.线.三角形是OpenGL ES世界的图形基础.无论多么复杂的几何物体,在OpenGL ES的世界里都可以用三角形拼成.关于Android OpenGL ES 三角形的绘制,在Android官方文档中有详细的说明和步骤,本文实例也是依照官方文档步骤绘制的三角形. 步骤 依照官方文档中的说明,Android中利用OpenGL ES 2.0绘制三角形的步骤为: 1. 在AndroidManifest.xml文件中设置使用

  • PHP实现的简单三角形、矩形周长面积计算器分享

    运用PHP面向对象的知识设计一个图形计算器,同时也运用到了抽象类知识,这个计算器可以计算三角形的周长和面积以及矩形的周长和面积.本图形计算器有4个页面:1.PHP图形计算器主页index.php;    2.形状的抽象类shape.class.php;    3三角形计算类triangle.class.php;    4.矩形计算类rect.class.php. PHP图形计算器代码点击下载:   php图形计算器.zip 代码分别如下: PHP图形计算器主页: <html>     <

  • C++输出上三角/下三角/菱形/杨辉三角形(实现代码)

    1.输出上三角形第一行1个星,第二行3个星,第三行5个星,第四行7个星,第五行9个星.分析:三角形的形状由输出的空白和星组成,通过分析每一行输出几个空格,几个星,就可完成输出三角形的工作. 复制代码 代码如下: #include<iostream>using namespace std;int main(){ int i=0,j=0; for(i=1;i<=5;i++){//控制行数      for(j=1;j<=(5-i);j++){      cout<<&quo

随机推荐