绘制三角形，梯形

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        body{
            margin: 100px;
        }
        .span1{
            display: inline-block;
            border-left: 60px solid darkorange;
            border-top: 50px solid  transparent;
            border-bottom: 50px solid  transparent;
        /*<!--transparent使border透明，只保留挤压效果-->*/
            width: 0px;
            height: 0px;
        }
        .span2{
            display: inline-block;
            border-left: 50px solid darkorange;
            border-top: 50px solid  orange;
            border-bottom: 50px solid  fuchsia;
            border-right:  50px solid  green;
            width: 0px;
            height: 0px;
        }
        .span3{
            background-color: blue;
            display: inline-block;
            border-left: 50px solid darkorange;
            border-top: 50px solid  orange;
            border-bottom: 50px solid  fuchsia;
            border-right:  50px solid  green;
            width: 40px;
            height: 40px;
        }

</style>
</head>
<body>
    <span class="span1">

</span>
 <span class="span2">

</span>

<span class="span3">

</span>

</body>
</html>

时间： 2024-10-11 16:48:39

绘制三角形，梯形的相关文章

css绘制三角形

今天看到人家用css画了一个三角形,简简单单几行代码,惊讶css其实还有很多我们不知道的东西. 三角形其实还是可以用在很多地方的.其实就那么几行代码直接贴上: div.arrow-up {     width: 0;     height: 0;     border-left: 50px solid transparent;     border-right: 50px solid transparent;     border-bottom: 50px solid #2f2f2f;     

CSS绘制三角形的原理剖析

今天学习Bootstrap时候,看到按钮的向下三角形源码: 1 .caret { 2 display: inline-block; 3 width: 0; 4 height: 0; 5 margin-left: 2px; 6 vertical-align: middle; 7 border-top: 4px solid; 8 border-right: 4px solid transparent; 9 border-left: 4px solid transparent; 10 } 我对bord

纯CCS绘制三角形箭头图案

用CSS绘制三角形箭头.使用纯CSS,你只需要很少的代码就可以创作出各种浏览器都兼容的三角形箭头! CSS代码: /* create an arrow that points up */ div.arrow-up { width: 0; height: 0; border-left: 5px solid transparent; /* left arrow slant */ border-right: 5px solid transparent; /* right arrow slant */

绘制三角形矩形

/**绘制三角形*/ CGContextRef contextRef=UIGraphicsGetCurrentContext(); CGContextMoveToPoint(contextRef, 100, 100); CGContextAddLineToPoint(contextRef, 100, 200); CGContextAddLineToPoint(contextRef, 200, 200); CGContextMoveToPoint(contextRef, 100, 100); CG

Android OpenGL入门示例:绘制三角形和正方形 (附完整源码)

Android上对OpenGl的支持是无缝的,所以才有众多3D效果如此逼真的游戏,在Camera的一些流程中也有用到GLSurfaceView的情况.本文记录OpenGL在Android上的入门级示例,绘制一个三角形和正方形.尽管功能简单,可是我捣腾了好几个晚上,大量网上文章上的代码都有点问题,不是绘制不出来就是挂了. 第一个文件:MainActivity.java package com.example.learnopengl1; import android.opengl.GLSurface

纯CSS绘制三角形

使用CSS绘制三角形 正三角形的绘制: 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>正三角形</title> 6 <style type="text/css"> 7 #triangle-up { 8 width: 0; 9 height: 0; 10

Quartz2D-contex绘制三角形

//获取上下文 CGContextRef context =UIGraphicsGetCurrentContext(); //线条加粗 CGContextSetLineWidth(context , 5); //设置背景颜色    [[UIColor grayColor]set];    UIRectFill([self bounds]);    //利用path进行绘制三角形    //标记    CGContextBeginPath(context);    //设置起点    CGCont

利用Quartz2D-contex绘制三角形

//获取上下文 CGContextRef context =UIGraphicsGetCurrentContext(); //线条加粗 CGContextSetLineWidth(context , 5); //设置背景颜色    [[UIColor grayColor]set];    UIRectFill([self bounds]);    //利用path进行绘制三角形    //标记    CGContextBeginPath(context);    //设置起点    CGCont

css绘制三角形原理

1.新建一个元素,将它的宽高都设置为0:然后通过设置border属性来实现三角形效果,下面是css绘制三角形的原理: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> .caret{ height:0;/*将宽高都设置为0*/ width:0; border:1

CSS用border绘制三角形

使用border绘制三角形的思路,就是border值设置一个很大的值,元素自身的宽高设置为0,全部由边线占据,这样每边就会显示为四分之一块的三角形.这样不借助图片,可以直接绘制出三角形了. 一个栗子: <!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <ht