CSS3画三角形、菱形、平行四边形

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>画三角形,菱形，平行四边形</title><style type="text/css">.trangle{border-right: 0px solid red;border-left: 100px solid blue;border-top:100px solid transparent;border-bottom:100px solid transparent;margin: 50px auto;width: 0px;height: 0px;}.diamond{width: 100px;height: 100px;background-color: gray;margin:50px auto;transform: : rotate(45deg);-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);} .parallelogram{width: 200px;height: 100px;background-color: gray;margin:50px auto;transform: : skew(20deg,30deg);-webkit-transform:skew(20deg,30deg);-ms-transform:skew(20deg,30deg);-o-transform:skew(20deg,30deg); //可对xz轴，y轴分别进行设置}</style>
</head>
<body><div class="trangle"></div><div class="diamond"></div><div class="parallelogram"></div>
</body>
</html>

CSS3画三角形、菱形、平行四边形相关推荐

css3画一个三角形,css3 画三角形
/*箭头向上*/ .arrow-up { width:0; height:0; border-left:20px solid transparent; border-right:20px solid ...
百度前端笔试题 css3画三角形
昨天做了百度2015年前端研发笔试卷,总体感受是比较看重html和css功底,对JavaScript的考察反而更少一些,貌似阿里也是比较看重css这一块.其中有一道用css实现的布局问题,是在一个大矩 ...
css画一个三角形,梯形,平行四边形
一使用css简单的画一个三角形 1. 先来看看border的划分 .demo{width:100px;height:100px;border:3px red solid;} 2. 当盒子的宽度为0会 ...
OpenGL画三角形圆五角星菱形
不开心,想玩,当家的不许我玩,还说你要玩就玩,那我不管你了,哭哭TAT 用OPenGL原有的画三角形,正方形,点的函数来作图. 画圆是用化曲为直的思想,把圆分为很多分,越分的多越细,越像圆. 画菱形和 ...
菱形实现气泡Bubble，菱形画箭头，菱形画三角形
菱形实现气泡Bubble,菱形画箭头,菱形画三角形 >>>>>>>>>>>>>>>>>>&g ...
7-132 画菱形 (10 分) 菱形是一种特殊的平行四边形，是四条边均相等的平行四边形。给出菱形的边长n，用*画出菱形。 PTA：中M2021春C、Java入门练习第I段——变量、表达式、分支、循环
7-132 画菱形 (10 分) 菱形是一种特殊的平行四边形,是四条边均相等的平行四边形.题目给出菱形的边长n,用*画出菱形.如n=1,输出: n=2,输出: n=3,输出: 那么,你能用程序来实现么 ...
CSS3画圆环、各种三角形、五角星
一.圆环效果实现步骤: 1.分析:它是由一个正方形通过border-radius属性转化为圆形的:空心可以由调大边框来实现. 代码如下: 先画出一个空心的正方形 div{margin: 100px ...
如何使用HTML+CSS画三角形
今天又有小姐姐在群里问css是如何画出三角形的,让我想起一开始在学校学HTML+CSS的时候,觉得学这些标签样式很无趣,认为不过是一些文字+图片,直到偶然在慕课网上面看了一个视频=>重拾CSS的 ...
css画三角形(怎么用css画三角形)
如何用css3画一个有边框的三角形如果是一个正方形,我们写边时,会用到border,但我们这里讨论的三角形本身就是border,不可能再给border添加border属性,所以我们需要用到其他办法. ...
如何用css画三角形
在设计稿中,经常会出现好多三角形,如果将三角形变成图片,通过img标签的src或者background中的url来访问,从前端性能方面来看这并不好.那问题来了,如何用css来画三角形呢?别着急,先来看 ...

CSS3画三角形、菱形、平行四边形

CSS3画三角形、菱形、平行四边形相关推荐

最新文章

热门文章