精华内容
下载资源
问答
  • css三角形运用

    2018-12-28 15:45:49
    一个简单的三角形运用页面 原理就是宽高为0,设置边框就是三角形了, 然后加点定位到自己想要的地方。 .sjx{ margin: auto; width: 0; height: 0; border:10px solid transparent; border-...

    一个简单的三角形运用页面

    原理就是宽高为0,设置边框就是三角形了,

    然后加点定位到自己想要的地方。

    	.sjx{
    				margin: auto;
    				width: 0;
    				height: 0;
    			    border:10px solid transparent;
    				border-top: 10px solid #000000;
    				position: relative;
    				top: 20%;
    			}

    如果要还角度,再次改变border的top bottom left  和right就可以了,颜色也可以直接换

    进阶三角形:

    可以用js 改变class br bc  tr tc 来改变颜色用于显示正序还是倒序。

     

    <!doctype html>
    <html>
    
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    		<link rel="stylesheet" type="text/css" href="../css/mui.min.css"/>
    		<link href="../css/mui.min.css" rel="stylesheet" />
    		<link rel="stylesheet" type="text/css" href="../css/general.css"/>
    		<style type="text/css">
    			
    			.mui-content{
    				background-color: #F2F2F2;
    			}
    			
    			.content{
    				width: 100%;
    				background-color: #F2F2F2;
    				padding: 10px;
    			}
    			.search{
    				display: flex;
    				justify-content: center;
    				align-content: center;
    				padding: 10px;
    				background-color: white;
    			}
    			.stext{
    				width: 25%;
    				text-align: center;
    				display: flex;
    				justify-content: center;
    				align-items: center;
    				border-right:1px solid #C7C7CC;
    			}
    			.simg{
    				width: 30px;
    				height: 30px;
    			}
    			.simg>img{
    				width: 100%;
    				height: 100%;
    			}
    			.ssdiv{
    				width: 75%;
    			}
    			.ssinp{
    				width: 100%;
    				height: 100%;
    				border: 0;
    				padding-left: 10px;
    			}
    			::-webkit-input-placeholder{
    				font-size: 0.8em;
    				color: #999999;
    			} 
    			.sjx{
    				margin: auto;
    				width: 0;
    				height: 0;
    			    border:10px solid transparent;
    				border-top: 10px solid #000000;
    				position: relative;
    				top: 20%;
    			}
    			
    			.sj{
    			  display: flex;
    			  flex-direction: column;
    			  align-items: center;
    			  justify-content: space-between;
    			 z-index: 9;
    			}
    
    .tc{
       display: inline-block;
        position: relative;
        width: 0;
        height: 0;
        border: 10px solid transparent;
        border-top-color: #CBCCCC;
        margin: 5px;
    }
    .tr{
       display: inline-block;
        position: relative;
        width: 0;
        height: 0;
        border: 10px solid transparent;
        border-top-color: red;
        margin: 5px;
    }
    .bc{
       display: inline-block;
        position: relative;
        width: 0;
        height: 0;
        border: 10px solid transparent;
        border-bottom-color: #CBCCCC;
        margin: 5px;
    }
    .br{
       display: inline-block;
        position: relative;
        width: 0;
        height: 0;
        border: 10px solid transparent;
        border-bottom-color:  red;
        margin: 5px;
    }
    		</style>
    	</head>
    
    	<body>
    		
    		<header class="mui-bar mui-bar-nav hbg">
    		    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left colorw"></a>
    		    <h1 class="mui-title">挂单列表</h1>
    		</header>
    		<div class="mui-content">
    		    <div class="content">
    		    	<div class="search">
    		    		<div class="stext">
    		    			单据号
    		    			<div class="sjx">
    		    			</div>
    		    			
    		    		</div>
    		    		<div class="ssdiv">
    		    			<input class="ssinp" type="" name="" id="" value=""  placeholder="请输入单据号/手机号/卡号/姓名/车牌号"/>
    		    		</div>
    		    		<div class="simg">
    		    			<img src="../images/60x60.gif"/>
    		    		</div>
    		    	</div>
    		    </div>
    		    
    		    <div class="sj">
    					    <div class="br"></div>
    					    <div class="tc"></div>
    			 </div>
    		    
    		    
    		</div>
    		<script src="../js/mui.min.js"></script>
    		<script type="text/javascript">
    			window.onload = function(){
    				
    				
    				
    			}
    		</script>
    	</body>
    
    </html>

     

    展开全文
  • 酷酷的CSS3三角形运用.pdf
  • CSS3 三角形运用

    2019-01-23 10:18:00
    酷酷的 CSS3 三角形运用 概述 在早期的前端Web设计开发年代,完成一些页面元素时,我们必须要有专业的PS美工爸爸,由PS美工爸爸来切图,做一些圆角、阴影、锯齿或者一些小图标。 在CSS3出现后,借助...

    酷酷的 CSS3 三角形运用

    在早期的前端Web设计开发年代,完成一些页面元素时,我们必须要有专业的PS美工爸爸,由PS美工爸爸来切图,做一些圆角、阴影、锯齿或者一些小图标。

    在CSS3出现后,借助一些具有魔力的CSS3属性,使得这些元素大多都可以由开发人员自己来完成。在开始阅读这篇文章前,我们先喊个口号:不想当艺术家的程序员不是好设计师!

     

    图例

    我们先来看一副设计图

    image

    这幅图复杂的元素不多,布局也较为简单,我们大致分析一下,需要PS美工爸爸帮忙做的只有一件事情,就是将上半部分的蓝色背景图给抠出来。
    除此之外,出现在这幅设计图的一些特殊形状和小图标,都可以通过CSS3来实现。
    我们将这些特殊形状和小图标分为两类:

    1. 可以用Icon Font实现的

    imageimage

    Icon Font是将一些图标作成字体文件,在CSS中指定font-face和font-family,然后为每个图标指定相应的class。
    在网页中使用Icon Font就像使用普通的文字一样,比如font-size属性可以设定图标的大小,设定color属性可以设定图标的颜色。
    更多内容,请参考阿里巴巴矢量图标管理网站:http://iconfont.cn/

    2. 不能用IconFont实现的

    image

    为什么这些图形不用IconFont实现呢?因为通常Icon Font提供的都是一些正方形的矢量图标,也就是长等于宽的图标。
    本篇要讲的就是如何通过CSS3来实现这4个图形。

    三角形

    不知大家注意到了没有,这4个图形都包含了一个特殊的元素——三角形。
    这4个图形,都是由三角形、长方形,或者是一个被啃掉了一口的长方形组成的。

    CSS3是如何实现三角形的呢?——答案是通过边框,也就是border属性。

    长方形边框

    HTML的块级元素都是长方形的,比如我们设定了以下样式:

     

     

     

     

    如大家所认知的,这只是一个简单的长方形,这个长方形在画面中是这样显式的:

     

     这个长方形太单调了,再给它点颜色看看,咱们来个彩色边框吧。

     

    复制代码
    <style>
        .colored-border-retangle {
            margin: 50px auto;
            width: 200px;
            height: 200px;
            border-top: 40px solid coral;
            border-right: 40px solid lightblue;
            border-bottom: 40px solid lightgreen;
            border-left: 40px solid mediumpurple;
        }
    </style>
    <div class="colored-border-retangle"></div>
    复制代码

     在画面中,每个边框都变成一个梯形了。

    image

    为什么它会变成梯形呢?

    image

    请注意长方形的4个角,以左上角为例,它到底是属于左边框还是上边框呢?
    左上角,既属于左边框,又属于上边框,角落的归属成了一个问题,浏览器为了不让边框打架,就让二位各分一半吧。
    于是乎左上角就被一分为二,变成了两个三角形,三角形靠近哪个边框,就显示那个边框的颜色。

    三角形的实现

    再看看文章开头的4个图案,你是不是又发现了这样一个规律?每个三角形都是“小家碧玉”的,它们没有内容
    既然如此,我们把上面这个彩色边框的矩形内容拿掉,看看会发生什么。

     

     

     

     

     

     

     

    呜,cool!左边和右边都是三角形了 耶!

    为什么上边和下边还是梯形呢?这是因为块级元素默认会在页面上水平平铺。

    理解这一点,让上边和下边也变成三角形就简单了,将元素的width属性设为0:

     

     

     

     

     

     

     

     

    现在上下左右4个边框都是三角形了。

    image

    假设我们不要4个三角形,也不要让它们凑一块,我们就只要1个三角形,该如何做呢?
    将其他3个边框的颜色设为透明色:

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

      

     

     图案实现

    知道了三角形的实现方法,那么下面4个图案实现起来就小Case了。

    image

    这4个图案分别是:旗帜,向右的双实心箭头,气泡和丝带。

    View Demo

    为了便于这几种图案的演示,我们先设定以下基础共通的样式

     

     

     

     

     

     

    实现旗帜

    旗帜图案是下半部分被啃掉了一口的长方形,这一口是个三角形。

    image
    根据以上知识,我们很自然地就能想到实现方法,将border-bottom的颜色设置为透明的。

     

     

     

     

     

     

    双实心箭头则是由两个三角形组成的

    image

    为了减少页面的HTML元素,我们可以只提供一个元素实现第1个三角形,然后借助CSS3的伪类实现第2个三角形。
    第1个三角形使用了相对定位,第2个三角形使用了绝对定位,使得第2个三角形能够紧挨着第1个三角形。

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

    需要注意的是,箭头方向是向右的,但在CSS里面是通过border-left的颜色来控制的。

    实现气泡

    气泡是我们常见的一种图案,它是由一个三角形和一个长方形组成的。

    image

    由于三角形是放在长方形前面的,所以我们使用:before伪类,并设置绝对定位。

     

     

     

     

     

     

     

     

     

     

     

    实现丝带

    丝带的实现则稍微复杂一些,不过我们可以将它拆分成3个部分:

    1. 一个显示文字的长方形
    2. 左右两侧的耳朵(被啃了一口的长方形)
    3. 在下方用于显示阴影的两个小三角形

    image

    第1步:实现丝带主体长方形

    image

    第2步:实现丝带左右两侧的耳朵

    :before伪类实现左耳朵,:after伪类实现右耳朵

     

     

     

     

     

     

     

     

     

     

     

     

     

    image

    第3步:实现阴影

     

     

     

     

     

     

     

     

     

     

     

     

    HTML代码:

    <div class="ribbon">
        <span class="ribbon-content">金卡会员</span>
    </div>

    最终效果:

    image

    页面实现

    有以上的知识基础,实现本文开头的设计图就较为简单了。
    由于代码较长,我就不贴出来了,请各位直接到GitHub上查看这个demo吧。

    View Demo

    总结

    读完以上内容,是不是觉得实现这些图案变得很简单了?是不是感觉很酷?现在你可以叫自己为爸爸了。
    三角形的运用场景非常之多,你尽可以发挥你的想象去实现它们!

    转载于:https://www.cnblogs.com/wl-blog/p/10307475.html

    展开全文
  • css3小三角形运用

    2019-03-04 15:26:34
    css3小三角形运用 border属性 &lt;style&gt; .triangle{ width: 100px; height: 100px; border: 30px solid palegreen; margin: 0 50px; } &lt;/style&gt; &lt;div class="triangle....

    css3小三角形运用


    border属性

    <style>
        .triangle{
            width: 100px;
            height: 100px;
            border: 30px solid palegreen;
            margin: 0 50px;
        }
    </style>
    <div class="triangle"></div>
    

    效果图:

    接下来将边框高度设置为0,各条边设置不同色值:

    <style>
        .triangle{
            width: 0;
            height: 0;
            margin: 0 50px;
            border-top: 30px solid palegreen;
            border-right: 30px solid deepskyblue;
            border-bottom: 30px solid palevioletred;
            border-left: 30px solid peru;
        }
    </style>
    <div class="triangle"></div>
    

    效果图:

    效果上有4个小三角了,就可以根据需要将某3个三角形设置透明度为0即可;

    .triangle-left,.triangle-right,.triangle-bottom,.triangle-top{
            width: 0;
            height: 0;
            margin: 0 50px;
            border: 30px solid transparent;
        }
        .triangle-left{
            border-left: 30px solid peru;
        }
        .triangle-right{
            border-right: 30px solid palevioletred;
        }
        .triangle-bottom{
            border-bottom: 30px solid deeppink;
        }
        .triangle-top{
            border-top: 30px solid palegreen;
        }
    </style>
    <div class="triangle-left"></div>
    <div class="triangle-top"></div>
    <div class="triangle-right"></div>
    <div class="triangle-bottom"></div>
    

    展开全文
  • 酷酷的CSS3三角形运用

    2016-09-15 11:19:12
    酷酷的CSS3三角形运用 概述 在早期的前端Web设计开发年代,完成一些页面元素时,我们必须要有专业的PS美工爸爸,由PS美工爸爸来切图,做一些圆角、阴影、锯齿或者一些小图标。 在CSS3出现后,借助一些具有魔力...

    酷酷的CSS3三角形运用

    概述


    在早期的前端Web设计开发年代,完成一些页面元素时,我们必须要有专业的PS美工爸爸,由PS美工爸爸来切图,做一些圆角、阴影、锯齿或者一些小图标。

    在CSS3出现后,借助一些具有魔力的CSS3属性,使得这些元素大多都可以由开发人员自己来完成。
    在开始阅读这篇文章前,我们先喊个口号:不想当艺术家的程序员不是好设计师!

    本文的Demo和源代码已放到GitHub,如果您觉得本篇内容不错,请点个赞,或在GitHub上加个星星!

    图例

    我们先来看一副设计图

    image


    这幅图复杂的元素不多,布局也较为简单,我们大致分析一下,需要PS美工爸爸帮忙做的只有一件事情,就是将上半部分的蓝色背景图给抠出来。
    除此之外,出现在这幅设计图的一些特殊形状和小图标,都可以通过CSS3来实现。
    我们将这些特殊形状和小图标分为两类:

    1. 可以用Icon Font实现的

    imageimage

    Icon Font是将一些图标作成字体文件,在CSS中指定font-face和font-family,然后为每个图标指定相应的class。
    在网页中使用Icon Font就像使用普通的文字一样,比如font-size属性可以设定图标的大小,设定color属性可以设定图标的颜色。
    更多内容,请参考阿里巴巴矢量图标管理网站:http://iconfont.cn/

    2. 不能用IconFont实现的

    image


    为什么这些图形不用IconFont实现呢?因为通常Icon Font提供的都是一些正方形的矢量图标,也就是长等于宽的图标。
    本篇要讲的就是如何通过CSS3来实现这4个图形。

    三角形

    不知大家注意到了没有,这4个图形都包含了一个特殊的元素——三角形。
    这4个图形,都是由三角形、长方形,或者是一个被啃掉了一口的长方形组成的。

    CSS3是如何实现三角形的呢?——答案是通过边框,也就是border属性。

    长方形边框

    HTML的块级元素都是长方形的,比如我们设定了以下样式:

    <style>
        .simple-retangle {
            margin: 50px auto;
            width: 200px;
            height: 200px;
            border: 40px solid salmon;
        }
    </style>
    <div class="simple-retangle"></div>
    

    如大家所认知的,这只是一个简单的长方形,这个长方形在画面中是这样显式的:

    image

    这个长方形太单调了,再给它点颜色看看,咱们来个彩色边框吧。

    <style>
        .colored-border-retangle {
            margin: 50px auto;
            width: 200px;
            height: 200px;
            border-top: 40px solid coral;
            border-right: 40px solid lightblue;
            border-bottom: 40px solid lightgreen;
            border-left: 40px solid mediumpurple;
        }
    </style>
    <div class="colored-border-retangle"></div>
    

    在画面中,每个边框都变成一个梯形了。

    image

    为什么它会变成梯形呢?

    image


    请注意长方形的4个角,以左上角为例,它到底是属于左边框还是上边框呢?
    左上角,既属于左边框,又属于上边框,角落的归属成了一个问题,浏览器为了不让边框打架,就让二位各分一半吧。
    于是乎左上角就被一分为二,变成了两个三角形,三角形靠近哪个边框,就显示那个边框的颜色。

    三角形的实现

    再看看文章开头的4个图案,你是不是又发现了这样一个规律?每个三角形都是“小家碧玉”的,它们没有内容
    既然如此,我们把上面这个彩色边框的矩形内容拿掉,看看会发生什么。

    <style>
        .colored-border-empty-retangle {
            margin: 50px auto;
            border-top: 40px solid coral;
            border-right: 40px solid lightblue;
            border-bottom: 40px solid lightgreen;
            border-left: 40px solid mediumpurple;
        }
    </style>
    <div class="colored-border-empty-retangle"></div>
    

    呜,cool!左边和右边都是三角形了 耶!

    image

    为什么上边和下边还是梯形呢?这是因为块级元素默认会在页面上水平平铺。
    理解这一点,让上边和下边也变成三角形就简单了,将元素的width属性设为0:

    <style>
        .colored-border-empty-retangle {
            margin: 50px auto;
            width: 0;
            height: 0;
            border-top: 40px solid coral;
            border-right: 40px solid lightblue;
            border-bottom: 40px solid lightgreen;
            border-left: 40px solid mediumpurple;
        }
    </style>
    <div class="colored-border-empty-retangle"></div>
    

    现在上下左右4个边框都是三角形了。

    image

    假设我们不要4个三角形,也不要让它们凑一块,我们就只要1个三角形,该如何做呢?
    将其他3个边框的颜色设为透明色:

    <style>
        .triangle-top,
        .triangle-right,
        .triangle-bottom,
        .triangle-left {
            margin: 20px auto;
            width: 0;
            height: 0;
            border: 100px solid transparent;
        }
        
        .triangle-top {
            border-top-color: coral;
        }
        
        .triangle-right {
            border-right-color: lightblue;
        }
        
        .triangle-bottom {
            border-bottom-color: lightgreen;
        }
        
        .triangle-left {
            border-left-color: mediumpurple;
        }
    </style>
    <div class="triangle-top"></div>
    <div class="triangle-right"></div>
    <div class="triangle-bottom"></div>
    <div class="triangle-left"></div>

    image


    图案实现

    知道了三角形的实现方法,那么下面4个图案实现起来就小Case了。

    image

    这4个图案分别是:旗帜,向右的双实心箭头,气泡和丝带。

    View Demo

    为了便于这几种图案的演示,我们先设定以下基础共通的样式

    * {
        font-family: simhei, sans-serif;
        box-sizing: border-box;
    }
    
    html {
        font-size: 62.5%;
    }
    
    body {
        background-color: lightblue;
    }
    
    div {
        margin: 20px auto;
    }

    实现旗帜

    旗帜图案是下半部分被啃掉了一口的长方形,这一口是个三角形。

    image
    根据以上知识,我们很自然地就能想到实现方法,将border-bottom的颜色设置为透明的。

    .flag {
        width: 0;
        height: 0;
        border: 2rem solid #FF6600;
        border-top-width: 4rem;
        border-bottom-color: transparent;
        border-bottom-width: 2rem;
    }
    

    实现双实心箭头

    双实心箭头则是由两个三角形组成的

    image

    为了减少页面的HTML元素,我们可以只提供一个元素实现第1个三角形,然后借助CSS3的伪类实现第2个三角形。
    第1个三角形使用了相对定位,第2个三角形使用了绝对定位,使得第2个三角形能够紧挨着第1个三角形。

    .rds-arrow-wrapper {
        position: relative;
        width: 20em;
        text-align: center;
    }
    
    .rds-arrow,
    .rds-arrow:after {
        display: inline-block;
        position: relative;
        width: 0;
        height: 0;
        border-top: 1rem solid transparent;
        border-left: 2rem solid #fff;
        border-bottom: 1rem solid transparent;
        border-right: 2rem solid transparent;
    }
    
    .rds-arrow {
        margin-left: 1rem;
    }
    
    .rds-arrow:after {
        content: "";
        position: absolute;
        left: 100%;
        top: -1rem;
        bottom: 0;
    }
    

    需要注意的是,箭头方向是向右的,但在CSS里面是通过border-left的颜色来控制的。

    实现气泡

    气泡是我们常见的一种图案,它是由一个三角形和一个长方形组成的。

    image

    由于三角形是放在长方形前面的,所以我们使用:before伪类,并设置绝对定位。

    .bubble {
        position: relative;
        background-color: #33AAEE;
        width: 10rem;
        height: 3rem;
        font-size: 2rem;
        line-height: 3rem;
        color: #FFF;
        text-align: center;
    }
    
    .bubble:before {
        position: absolute;
        content: "";
        right: 100%;
        top: 1rem;
        width: 0;
        height: 0;
        border-top: 0.6rem solid transparent;
        border-right: 0.6rem solid #33AAEE;
        border-bottom: 0.6rem solid transparent;
        border-left: 0.6rem solid transparent;
    }
    
    .bubble .text {
        display: inline-block;
    }
    

    实现丝带

    丝带的实现则稍微复杂一些,不过我们可以将它拆分成3个部分:

    1. 一个显示文字的长方形
    2. 左右两侧的耳朵(被啃了一口的长方形)
    3. 在下方用于显示阴影的两个小三角形

    image

    第1步:实现丝带主体长方形

    .ribbon {
        position: relative;
        width: 10rem;
        height: 3rem;
        padding: 0.7rem 0;
        font-size: 1.6rem !important;
        color: #fff;
        text-align: center;
        background: #ff0066;
    }
    

    image

    第2步:实现丝带左右两侧的耳朵

    :before伪类实现左耳朵,:after伪类实现右耳朵

    .ribbon:before,
    .ribbon:after {
        content: "";
        position: absolute;
        display: block;
        bottom: -0.6rem;
        border: 1.5rem solid #ff0066;
        z-index: -1;
    }
    
    .ribbon:before {
        left: -2.4rem;
        border-right-width: 1.5rem;
        border-left-color: transparent;
        box-shadow: 1px 1px 0 rgba(176, 102, 166, 0.8);
    }
    
    .ribbon:after {
        right: -2.4rem;
        border-left-width: 1.5rem;
        border-right-color: transparent;
        box-shadow: 0 1px 0 rgba(176, 102, 166, 0.8);
    }
    

    image

    第3步:实现阴影

    .ribbon .ribbon-content:before,
    .ribbon .ribbon-content:after {
        content: "";
        position: absolute;
        display: block;
        border-style: solid;
        border-color: #bf004c transparent transparent transparent;
        bottom: -0.6rem;
    }
    
    .ribbon .ribbon-content:before {
        left: 0;
        border-width: 0.6rem 0 0 0.6rem;
    }
    
    .ribbon .ribbon-content:after {
        right: 0;
        border-width: 0.6rem 0.6rem 0 0;
    }
    

    HTML代码:

    <div class="ribbon">
        <span class="ribbon-content">金卡会员</span>
    </div>
    

    最终效果:

    image

    页面实现

    有以上的知识基础,实现本文开头的设计图就较为简单了。
    由于代码较长,我就不贴出来了,请各位直接到GitHub上查看这个demo吧。

    View Demo

    总结

    读完以上内容,是不是觉得实现这些图案变得很简单了?是不是感觉很酷?现在你可以叫自己为爸爸了。
    三角形的运用场景非常之多,你尽可以发挥你的想象去实现它们!

    本文链接:http://www.cnblogs.com/keepfool/p/5616326.html文章作者:keepfool文章出处:http://www.cnblogs.com/keepfool/如果您觉得阅读本文对您有帮助,请点一右下角的“推荐”按钮,您的“推荐”将是我最大的写作动力!欢迎看官们转载,转载之后请给出作者和原文连接。

    展开全文
  • 使用CSS3实现三角形:  在前端页面中有很多时候会遇到需要三角形图案的时候,以前不知道可以用CSS3实现三角形的时候,一般都是叫UI把三角形图案切出来。  后来知道原来可以用CSS3实现三角形,可是用过一次后很...
  • 于是乎左上角就被一分为二,变成了两个三角形三角形靠近哪个边框,就显示那个边框的颜色。 三角形的实现 再看看文章开头的4个图案,你是不是又发现了这样一个规律?每个三角形都是“小家碧玉”的,它们 ...
  • 非常酷!CSS3三角形运用

    千次阅读 2016-08-09 16:05:00
    第1个三角形使用了相对定位,第2个三角形使用了绝对定位,使得第2个三角形能够紧挨着第1个三角形。 .rds-arrow-wrapper {   position : relative ;   width : 20em ;   text-align ...
  • 三角形制作与运用

    2019-02-11 19:16:16
    三角形制作与运用 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 开发工具与关键技术:DW 作者:黄海浪 撰写时间:2019年2月11日 ~~~~~~~~~~~~~~~...
  • for循环运用三角形

    2018-06-19 12:00:00
    用for循环打出三角形、倒三角形、金字塔、99乘法表 三角形: 打出如图三角形,分析行数与*个数的关系,用for循环  for(var i=0;i<5;++i){//i表示行数 var str="";//定义str 输出为空 for(var j=0;j...
  • 运用for循环打印三角形

    千次阅读 2019-03-04 19:36:23
    这里运用for循环打印出5行的三角形 public static void main(String[] agrs) { for(int i=1;i&amp;amp;amp;amp;amp;amp;lt;=5;i++){ //打印行数。 for(int j=1;j&amp;amp;amp;amp;amp;amp;...
  • 题目重点:运算turtle库里面的turtle.fd()和turtle.seth()函数,绘制等边三角形。思路:fd控制长度,而seth则为方向角度(等边三角形内角和为180°且每个角均为60°且三条边相等,转的角度为:0°,120°,240°,...
  • 部编第7章 全等三角形判定综合运用.docx
  • 2018年秋八年级数学上册第13章全等三角形专题训练五三种特殊的等腰三角形运用练习新版华东师大版
  • 利用css或html5画出一个三角形的方法发布时间:2020-09-14 14:49:22来源:亿速云阅读:83作者:小新...一、利用css的border属性,即可实现三角形的绘制代码:border 属性--绘制三角形.demo{height:0;width:0;overfl...
  • 运用递归写三角形

    2012-02-24 22:26:00
    1.带for循环的: View Code 1 #include<stdio.h> 2 #include<string.h> 3 #include<stdlib.h> 4 int m; 5 int deal( int n ) 6 { 7 8 if( n == 1 ) 9 {10 for( int i = 0; ...
  • 运用html与css画三角形

    2018-03-08 17:12:11
    代码如下:&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&... border-left: 5
  • c语言打印杨辉三角形运用数组)

    千次阅读 2019-03-02 17:22:52
    #define _CRT_SECURE_NO_WARNINGS #include #include ... i++) //输出杨辉三角形 { for (j = 0; j ; j++) printf("%d ", a[i][j]); printf("\n"); } system("pause"); return 0; }  
  • 2015秋八年级数学上册12.2三角形全等的判定运用全等三角形证题的基本思路新版新人教版
  • 在伍家岗区2019年秋季学期八年级数学期末考试第24题中,许多学生面对题目中纷繁的全等三角形,在选择合适全等中花费了较多时间,甚至没能找准需要的那一对,导致解题失败。全等三角形是八年级数学几何章节中最为重要...
  • 2020秋八年级数学上册第14章全等三角形14.2三角形全等的判定14.2.6全等三角形的判定方法的综合运用同步练习无答案新版沪科版
  • lang="en"> charset="UTF-8"> ...js-三角形/菱形 type="text/javascript"> for(var i=0;i for(var a=6;a>
  • 运用Python的turtle库绘制等边三角形

    万次阅读 多人点赞 2019-07-20 15:07:23
    题目重点:运算turtle库里面的turtle.fd()和turtle.seth()函数,绘制等边三角形。 思路:fd控制长度,而seth则为方向角度(等边三角形内角和为180°且每个角均为60°且三条边相等,转的角度为:0°,120°,240°...
  • if() { return; }

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 13,786
精华内容 5,514
关键字:

三角形运用