CSS 实现三角形、梯形、等腰梯形
三角形
.graph:before{ content: ""; display: block; height:; width: 0px; border-width: 0px 30px 45px 145px; border-style: none solid solid; border-color: transparent transparent red; }
等腰三角形(只用修改border-width属性值就可以了)
.graph:before{ content:""; display:block; width:; height:; border-width:0px 300px 100px; border-style:none solid solid; border-color:transparent transparent red; }
直角三角形
.graph:before{ content:""; display:block; width:; height:; border-width:0px 0px 200px 200px; border-style:none solid solid; border-color:transparent transparent red; }
梯形
.graph2:before{border-color:transparent transparent red;border-style:none solid solid;border-width:0 20px 60px 145px;content:"";display:block;height:;left:-10px;width:200px;}
等腰梯形
.graph2:before{border-color:transparent transparent red;border-style:none solid solid;border-width:0 45px 45px;content:"";display:block;height:;left:-10px;width:200px;}
等腰梯形旋转
.promotion-contain2 {
content:"";
display:block;
height:;
border-width:0px 15px 15px;
border-style:none solid solid;
border-color:transparent transparent red;
position:absolute;
-moz-transform:rotate(-45deg);/*FF浏览器*/
-webkit-transform:rotate(-45deg);/*chrome浏览器*/
-o-transform:rotate(-45deg);/*oprea浏览器*/
-ms-transform:rotate(-45deg);/*IE浏览器*/
left:-10px;
top:17px;
width:40px;
}
CSS 实现三角形、梯形、等腰梯形的更多相关文章
- 各种demo:css实现三角形,css大小梯形,svg使用
各种demo: 1.css实现正方形 思路:width为0:height为0:使用boder-width为正方形的边长的一半,不占任何字节:border-style为固体:border-color为正 ...
- 前端(各种demo)一:css实现三角形,css实现梯形,pop弹层,css伪类before,after使用,svg使用(持续更新中)
各种demo: 1.css实现正方形 思路:width为0:height为0:使用boder-width为正方形的边长的一半,不占任何字节:border-style为固体:border-color为正 ...
- CSS实现三角形、梯形、平行四边形、圆形、椭圆形、对话框、自适应正方形
本文篇幅较长,希望能坚持看完,转载请注明出处,如果觉得好文请给个赞吧 CSS实现梯形 CSS实现三角形和梯形主要是依靠border是梯形的特性来做的,有点像相框的那种感觉. 首先我们先给一个正方形设置 ...
- 三种纯CSS实现三角形的方法
看到像上图这样的 tip 的小三角,你会怎么办? 切个图上去?恩,不错,简单,兼容性也一级棒,不但好控制,那点小东西也增加不了多少图片的大小.但有没有更好更讲究技巧的办法呢?哈哈,那必须有啊,而且还不 ...
- CSS画三角形引发的一些思考
今天刷知乎时看到了一个问题,有谁能详细讲一下css如何画出一个三角形?怎么想都想不懂? - 知乎.很巧,刚入前端坑的我前不久也遇到过这个问题,今天再来谈一谈这个问题则是因为知乎的一些答案引发了我的 ...
- CSS制作三角形和按钮
CSS制作三角形和按钮 用上一篇博文中关于边框样式的知识点,能制作出三角形和按钮. 我先说如何制作三角形吧,相信大家在平时逛网站的时候都会看到一些导航栏中的三角形吧,比如说: 网易首页的头部菜单栏中, ...
- CSS 魔法系列:纯 CSS 绘制三角形(各种角度)
我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...
- CSS 制作三角形原理剖析
使用css制作三角形其实原理很简单,下面一步步解析. 1.html代码如下 <div class="triangle"> </div> 2.CSS代码 .t ...
- CSS实现三角形
突然想起搞一把三角形. 简单来说: 建一个div 宽度.高度设为0 添加两个样式: border 和 border-color 如果需要一个三角形把其他边框都设为透明 transparent < ...
- css绘制三角形原理
1.新建一个元素,将它的宽高都设置为0:然后通过设置border属性来实现三角形效果,下面是css绘制三角形的原理: <!DOCTYPE html> <html> <he ...
随机推荐
- Js遍历Josn对象(内容对比页实现思路)
更好的遍历Josn的方法,利用jquery的each方法: var arr1 = [ "one", "two", "three", &quo ...
- Swift--基础(二)元组 断言 错误处理
元组(tuples) 把多个值组合成一个复合值.元组内的值可以是任意类型,并不要求是相同类型 let http404Error = (404, "Not Found") let ( ...
- angularjs使用ng-messages-include实例
<!DOCTYPE html> <html lang="zh-CN" ng-app="app"> <head> <me ...
- 项目中redis类似MVC的使用
- apscheduler的使用
最近一个程序要用到后台定时任务,看了看python后台任务,一般2个选择,一个是apscheduler,一个celery.apscheduler比较直观简单一点,就选说说这个库吧.网上一搜索,晕死,好 ...
- python中os.walk()遍历目录中所有文件
之前一直用判断目录和文件的递归方法来获取一个目录下的所有文件,后来发现python里面已经写好了这个函数,不需要自己递归获取了,记录下os.walk()函数的用法 目的:获取path下所有文件,返回由 ...
- android 集成百度地图
一.下载百度地图为我们提供的所有DEMO. 在这里边我选的是一键下载. 二.下载后有两个项目一个是用于eclipse.另一个是android studio.我选的是android studio. 我用 ...
- cf C. Insertion Sort
http://codeforces.com/contest/362/problem/C #include <cstdio> #include <cstring> #includ ...
- Codeforces 351B Jeff and Furik
http://codeforces.com/problemset/problem/351/B 题意:两个人轮流游戏,先手交换相邻两个数,后手先抛硬币,正面就左大右小换,反面就右大左小换,随机找到一对数 ...
- CentOS下Qt窗口透明效果失效,成黑色背景的问题
一.问题 Linux系统下Qt窗口的透明效果成了黑色,但同样的代码在windows机子上有透明效果,主要是修改系统的配置,仅在centos6.3及其以上版本实验过.其他系统可以相应配置. 二.问题运行 ...