css绘制梯形、直角三角形

改老外的模板是看到了这个效果

看其源代码写了个demo

完整代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>div{width: 100px;min-height:50px;position:relative;background:#ff8a00;}div:before{position: absolute;left: 100%;top: 0;border-right: 50px solid transparent;border-bottom: 50px solid #ff8a00;content: "";}</style>
</head>
<body><div></div>
</body>
</html>

自己又尝试做了个直角三角形

代码如下

section{width: 0;border-right: 50px solid transparent;border-bottom: 50px solid #ff8a00;}

再想想能不能做个等边三角形，只要满足比例关系就行

 section{width: 0;border-right: 50px solid transparent;border-bottom: 86.6025405px solid #ff8a00;border-left: 50px solid transparent;}

网上查了下相关资料，边框不是直线也不是矩形，而是梯形

css绘制梯形、直角三角形相关推荐

css绘制梯形图形，及显示矩形图片
梯形 div+transform实现如上效果,直接拉到底部. -webkit-mask-image加上梯形遮罩也可实现. 1.使用border实现. 等腰梯形1.1 .trapezoid1-1 {wi ...
CSS绘制形状（三角形、四分之一圆、半圆、圆、梯形、球体、菱形）
CSS绘制形状(三角形.四分之一圆.半圆.圆.梯形.球体.菱形) 三角形 div {width: 0;height: 0;border: 200px solid transparent;border- ...
css绘制常见的一些图形(线条、箭头、三角形、矩形、圆、椭圆、平行四边形、菱形、梯形)
css常见的图形绘制线段的绘制直线(实线) 直线(虚线) 箭头的绘制单箭头双箭头三角形的绘制直角三角形三角形矩形圆椭圆梯形的实现梯形直角梯形圆角梯形菱形的实现通过正方形 ...
css一些特殊的图形,CSS 绘制特殊图形
先来绘制一个简单基础容器 CSS 绘制特殊图形 div { width: 300px; height: 300px; background: orange; border: 30px solid; b ...
[css] CSS画一个三角形，CSS绘制空心三角形
1.不同理解的边框 <div class="border"></div> .border {width: 50px;height: 50px;border: ...
用CSS绘制最常见的40种形状和基本图形
今天在国外的网站上看到了很多看似简单却又非常强大的纯CSS绘制的图形,里面有最简单的矩形.圆形和三角形,也有各种常见的多边形,甚至是阴阳太极和网站小图标,真的非常强大,分享给大家. Square(正方 ...
css绘制不规则图形
CSS绘制不规则图形在实际开发中,经常会遇到绘制图形(图标)的需求,比如:箭头图表.不规则图形.规则图形: 常见方法对于图形的实现,可以大体上分为几种做法 (1) 背景图片,请UI小姐姐帮你吧-- ...
html 如何改变图片形状,用css绘制各种形状
原标题:用css绘制各种形状自适应的椭圆 1.自适应的椭圆实现方式是通过border-radius这个属性:border-radius它可以单独指定水平和垂直半径.用 / 分隔这两个值.并且该属性 ...
【青少年编程】绘制等腰直角三角形
Scratch竞赛交流群已成立(适合6至18周岁的青少年),公众号后台回复[Scratch],即可进入. 如果加入了之前的社群不需要重复加入. 类比思维就是指把两个或者两类事物进行比较,并进行逻辑推理 ...

css绘制梯形、直角三角形

css绘制梯形、直角三角形相关推荐

最新文章

热门文章

css绘制梯形 、直角三角形

css绘制梯形 、直角三角形相关推荐

最新文章

热门文章

css绘制梯形、直角三角形

css绘制梯形、直角三角形相关推荐