.aly-tooltip {
display: inline-block;
padding: 5px;
padding-left: 15px;
padding-right: 15px;
background: #FFFFFF;
border: 1px solid #D7D8D9;
box-shadow: 0 0 15px 0 rgba(0,0,0,0.15);
position: relative;
left: 10px;
font-size: 12px;
width: auto;
color: #777F84;
}
.aly-tooltip::before {
content: "";
position: absolute;
display: inline-block;
width: 10px;
height: 10px;
border: 1px solid #ddd;
border-right: none;
border-top: none;
transform: rotate(45deg);
top: 8px;
left: -6px;
background: #fff;
box-shadow: -1px 1px 2px #ddd;
}

  以上就是一个对话框,小角的颜色可随意换

  一直都没有为css的分类写点东西,今天找了一些资料来写一写这个css的常见图形,开发中会用到的哦!

从最简单的正方形说:

width: 100px;
height: 100px;
background: red;

长方形:

width: 200px;
height: 100px;
background: red;

圆:

width: 100px;
height: 100px;
background: red;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;

椭圆:

width: 200px;
height: 100px;
background: red;
-moz-border-radius: 100px / 50px;
-webkit-border-radius: 100px / 50px;
border-radius: 100px / 50px;

上三角:

width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;

下三角:

#triangle-down {
width:;
height:;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid red;

左三角:

width: 0;
height: 0;
border-top: 50px solid transparent;
border-right: 100px solid red;
border-bottom: 50px solid transparent;

右三角:

width: 0;
height: 0;
border-top: 50px solid transparent;
border-left: 100px solid red;
border-bottom: 50px solid transparent;

左上三角:

width: 0;
height: 0;
border-top: 100px solid red;
border-right: 100px solid transparent;

右上三角:

width: 0;
height: 0;
border-top: 100px solid red;
border-left: 100px solid transparent;

右下三角:

width: 0;
height: 0;
border-bottom: 100px solid red;
border-left: 100px solid transparent;

左小三角:

width: 0;
height: 0;
border-bottom: 100px solid red;
border-right: 100px solid transparent;

梯形:

border-bottom: 100px solid red;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
height: 0;
width: 100px;

还有一个对话框:

#talkbubble {
width: 120px;
height: 80px;
background: red;
position: relative;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
#talkbubble:before {
content:"";
position: absolute;
right: 100%;
top: 26px;
width:;
height:;
border-top: 13px solid transparent;
border-right: 26px solid red;
border-bottom: 13px solid transparent;
}

恩,好,常见的图形这些差不多了,那么直角梯形,平行四边形怎么搞呢?还有保证里面的文字是正的。

看代码:

html

<div class="btn">home</div> 

css :

.btn{
position: relative;
width: 150px;
height: 40px;
text-align: center;
line-height: 40px;
}
.btn:after{
position:absolute;
content: '';
width: 100%;
height: 100%;
top:;
left:;
background-color: #fb3; z-index: -1; /* 保证背景不会覆盖住文字 */
transform: skew(-45deg);
-moz-transform: skew(-45deg);
-ms-transform: skew(-45deg);
-webkit-transform: skew(-45deg);
}

那么这这直角梯形呢

这个就需要这个css3中的perspective的属性,放在父元素上,然后在子元素上写transform的样式:

html 

<div class="parent">
<div class="child"> </div>
</div>
<p></p>
<div class="parent2">
<div class="child"> </div>
</div> css: .parent {
width: 100px;
height: 100px;
background-color: #ddd;
background-color: #fb3;
transform: perspective(20px) rotatex(5deg);
transform-origin: right;
} .parent2 {
width: 100px;
height: 100px;
background-color: #ddd;
background-color: #fb3;
transform: perspective(20px) rotatex(5deg);
transform-origin: left;
}
html
<div class="parent3">
<div class="child"> </div>
</div> css: .parent3 {
width: 100px;
height: 100px;
background-color: #ddd;
background-color: #fb3;
transform: perspective(20px) rotatex(-5deg);
transform-origin: left;
}

下面的倒梯形,就只需要在正梯形的基础上,将rotate(-5deg);

上面提到:背景图形有旋转变化,但是里面的文字去不能失真,上面用伪元素的方法可以实现,也可以这样做,父元素可以旋转正的多少度,然后他的子元素在旋转这个负的这个度数 就OK了;

父元素:
.messages_margin20>div>div>div:nth-of-type(2)>a{
border-radius: 10px;
transform: skew(-30deg);
display: block;
background: linear-gradient(to right, #a20000, #8e0000, #a20000);
-moz-transform: skew(-30deg);
-ms-transform: skew(-30deg);
-webkit-transform: skew(-30deg);
} 子元素: .messages_margin20>div>div>div:nth-of-type(2)>a .messages_col {
transform: skew(30deg); -moz-transform: skew(30deg);
-ms-transform: skew(30deg);
-webkit-transform: skew(30deg); }

(这个代码源于今日的工作项目中的内容)

每日一句:Love a person too much,the heart will be drunk; hate a person too long,the heart will be broken.

翻译:爱一个人太深,心会醉;恨一个人太久,心会碎。

css写的常见图形的更多相关文章

  1. 用纯css写一个常见的小三角形

    .test{ margin:50px auto; width: 0; height: 0; overflow: hidden; border-width: 10px; border-color: #0 ...

  2. 用CSS编写多种常见的图形

    用CSS编写多种常见的图形 正方形与长方形 这个是最简单的,直接上代码 <!DOCTYPE html> <html> <head> <title>< ...

  3. 用CSS绘制最常见的40种形状和图形

    今天在国外的网站上看到了很多看似简单却又非常强大的纯CSS绘制的图形,里面有最简单的矩形.圆形和三角形,也有各种常见的多边形,甚至是阴阳太极和网站小图标,真的非常强大,分享给大家. Square(正方 ...

  4. html+css写出类似word目录样式的内容

    word目录的格式里这种很常见,要用html+css写出来刚开始还有点懵. 左右两边都是内容撑开宽度,中间内容的宽度也不是确定的,也是随着左右两边的内容动态变化的. 最终解决思路是,给右边内容加上白色 ...

  5. CSS Icon 项目地址 小图标-用css写成的

    http://cssicon.space/#/icon/focus 这是所有用css写成的  小图标  右侧有 html和css代码

  6. css写出0.5px边框(一)

    在移动端会出现线条太粗的现象,简单来说,是因为手机端的像素单位和ui的图比例是2:1,所以ui图的1px边框对我们来说就是0.5px,但是浏览器渲染的最小单位就是1px,下面给几种方法用css写出0. ...

  7. 纯CSS写三角形-border法

    (1)有边框的三角形 我们来写下带边框的三角形. 如果是一个正方形,我们写边时,会用到border,但我们这里讨论的三角形本身就是border,不可能再给border添加border属性,所以我们需要 ...

  8. css写宽为30%的正方形

    如何用纯css写一宽为30%的正方形,用到了padding属性: 会不会恍然大悟呢? <!DOCTYPE html> <html lang="en"> &l ...

  9. CSS Devices可以让你在线直接获取使用CSS写的Mobile外形。

    CSS Devices可以让你在线直接获取使用CSS写的Mobile外形. CSS Devices 彩蛋爆料直击现场

随机推荐

  1. TempData知多少

    网上对TempData的总结为: 保存在session中,Controller每次执行请求时,会从session中一次获取所有tempdata数据,保存在单独的内部数据字典中,而后从session中清 ...

  2. Java的流程控制结构,细节详解

    位运算符 &与 |或 ^异或 <<左移 >>右移 >>>无符号右移  ~取反 注意:位运算是针对整数运算的 int i = 6,j = 10; 方式一 ...

  3. effective java笔记之java服务提供者框架

    博主是一名苦逼的大四实习生,现在java从业人员越来越多,面对的竞争越来越大,还没走出校园,就TM可能面临失业,而且对那些增删改查的业务毫无兴趣,于是决定提升自己,在实习期间的时间还是很充裕的,期间自 ...

  4. 判断json数据是否包含key

    1.("key" in jsonObj) 如果有返回true 没有返回false 2.jsonObj.hasOwnProperty("key") 如果有返回tr ...

  5. 工作随笔——selenium支持post请求,支持自定义header

    背景: 最近在写一个小程序,发现博主所在的地区访问该网站时有防ddos功能验证导致程序不能正常工作. 经过试验发现可以用国外代理ip解决这个问题,但是程序走代理访问延迟高且不稳定. 思路: selen ...

  6. Spring 链接数据库

    一.前言 Spring 现在是我们在做 JavaWeb 开发中,用的最主流的框架.以后是不是我们暂时不知道,但现在是.废话不多我就介绍 Spring 中.链接数据库的三种方式: git源码地址 需要的 ...

  7. 小强的Hadoop学习之路

    本人一直在做NET开发,接触这行有6年了吧.毕业也快四年了(6年是因为大学就开始在一家小公司做门户网站,哈哈哈),之前一直秉承着学要精,就一直一门心思的在做NET(也是懒吧).最近的工作一直都和大数据 ...

  8. sftp新建用户步骤

    1,切换root用户2,创建sftp组:groupadd sftp3,创建用户并限制进入路径:useradd -g sftp -s /bin/false testuser 修改密码: passwd t ...

  9. 《Linux系统编程手册》读书笔记——第2章基本概念

    操作系统的核心--内核 内核的职责 进程调度:Linux属于抢占式多任务操作系统,多个进程可同时驻留于内存,且每个进程都能获得对CPU的使用权.哪些进程获得对CPU的使用,以及每个进程能使用多长时间 ...

  10. Xamarin android如何反编译apk文件

    Xamarin android 如何反编译 apk文件 这里推荐一款XamarinAndroid开发的小游戏,撸棍英雄,游戏很简单,的确的是有点大.等一下我们来翻翻译这个Xamarin Android ...