<!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>平行四边形 与大括号</title>

 </head>

 <style>

     .div1{

     width:300px;

     height:50px;

     border-radius: 5px;

     background-color: #da8;

     transform: skew(15deg,0);

 }

 </style>

 <body>

 <!-- 平行四边形 -->

     <div class="div1"></div>

     <br><br><br>

 <!-- 大括弧 -->

     <div class="quote"><div></div></div>

     <style type="text/css">

     .quote {

         position: relative;

         width: 100%;

         height: 40px;

     }

     .quote::before, .quote::after, .quote ::before, .quote ::after {

         content: '';

         display: block;

         position: absolute;

         width: calc(50% - 20px);

         height: 20px;

         border-style: solid;

         border-color: #000;

         border-width:;

     }

     .quote ::before, .quote ::after {

         top:;

         border-bottom-width: 1px;

     }

     .quote::before, .quote::after {

         top: 20px;

         border-top-width: 1px;

     }

     .quote ::before {

         left:;

         border-bottom-left-radius: 20px;

     }

     .quote ::after {

         right:;

         border-bottom-right-radius: 20px;

     }

     .quote::before {

         left: 20px;

         border-top-right-radius: 20px;

     }

     .quote::after {

         right: 20px;

         border-top-left-radius: 20px;

     }

     </style>

 </body>

 </html>

css3 平行四边形 、大括弧的更多相关文章

  1. CSS3幸运大转盘最简单的写法

    点击开始 直接css动画 如果你要自己控制转到哪里 那就多写几个class 根据不同角度 运行不同的class..<pre>.zhuandong{ animation: zhuandong ...

  2. 9款经典华丽的CSS3分享按钮

    如果你经常活跃在一些社交网站上,那么你肯定会看到过很多形式各异的分享按钮,目前由于HTML5和CSS3的普及,很多分享按钮也都应用了CSS3样式,甚至会有很多带有动画的CSS3分享按钮.本文就向大家介 ...

  3. 8套迷人精致的CSS3 3D按钮动画

    1.纯CSS3 3D按钮 按钮酷似牛奶般剔透 CSS3按钮一般都可以设计的非常漂亮,利用投影.渐变等CSS3属性特效可以把按钮渲染的十分动感.今天分享的这款CSS3按钮外观非常特别,它看上去酷似晶莹剔 ...

  4. 淘宝ued - 前端智勇大闯关(第三季)答案(更新)

    淘宝ued - 前端智勇大闯关(第三季)答案(更新) 下午在微博上看到了淘宝智勇大闯关第三季的信息,感觉挺有意思的,于是就尝试做了下.附上题目地址: http://ued.campus.alibaba ...

  5. css3实现梯形三角

    近期移动端项目中,图片很多 移动端尽量少图片,以便提升加载速度!这时候css3可以大放光芒比如梯形的背景图 --------------------------------- ------------ ...

  6. CSS3 画基本图形，圆形、椭圆形、三角形等

    CSS3圆角#css3-circle{ width: 150px; height: 150px; border-radius: 50%; }CSS3 椭圆形css3 radius#css3-elips ...

  7. CSS3 实现圆形、椭圆形、三角形等各种形状样式

    CSS3 圆形 #css3-circle{ width: 150px; height: 150px; border-radius: 50%; background-color: #232323;} C ...

  8. 初步认识Less

    LESS 是一个流行的样式表语言,它提供了 CSS3 也未曾实现的多种功能,让您编写 CSS 更加方便,更加直观.LESS 已经被广泛使用在多种框架中 ( 例如:BootStrap).本文将介绍 LE ...

  9. Adobe Dreamweaver代码编辑

    Adobe Dreamweaver 同义词 DW(Adobe Dreamweaver的缩写)一般指Adobe Dreamweaver Adobe Dreamweaver,简称“DW”,中文名称 &qu ...

随机推荐

  1. lambda和抽象类

    lambda的使用条件是‘一个接口仅有一个待实现的方法’: so,lambda不能使用在抽象类上,使用后或提示‘Target type of a lambda conversion must be a ...

  2. YTU 2904: B--Faultfinding

    2904: B--Faultfinding 时间限制: 1 Sec  内存限制: 128 MB 提交: 64  解决: 33 题目描述 Do you remember the game in whic ...

  3. 并不对劲的loj2134:uoj132:p2304:[NOI2015]小园丁与老司机

    题目大意 给出平面直角坐标系中\(n\)(\(n\leq5*10^4\))个点,第\(i\)个点的坐标是\(x_i,y_i(|x_i|\leq10^9,1\leq y_i\leq10^9)\),只有朝 ...

  4. 【HAOI 2007】 上升序列

    [题目链接] 点击打开链接 [算法] 先预处理 : 将序列反转,求最长下降子序列 对于每个询问,根据字典序性质,贪心即可 [代码] #include<bits/stdc++.h> usin ...

  5. linux下解压tgz文件(转载)

    转自:http://www.blogjava.net/chenlb/archive/2008/09/03/226654.html .tgz 解压:    tar zxvf myfile.tgz

  6. python 高阶函数二 map()和reduce()

    一.map()函数 map()函数接收两个参数,一个是函数,一个是Iterable,map将传入的函数依次作用到序列的每个元素,并把结果作为新的Iterator返回. >>> fro ...

  7. vs2013 安装 mvc5 的方法

    工具-->NuGet程序包管理器-->程序包管理器控制台 然后 PM>Install-Package Microsoft.AspNet.Mvc -Version 5.0.0

  8. flask框架路由系统

    flask框架的url系统: flask框架的路由系统: flask框架的路由系统使用实例化的route方法来指定: 如: @app.route('/') route函数装饰器可以把一个函数绑定到对应 ...

  9. Bootstrap简介及安装使用

    Bootstrap 简介 什么是 Bootstrap? Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的 ...

  10. MyEclipse配置Tomcat

    1.在Window->Perferences->MyEclipse->Servers->Tomcat->Tomcat 7.x中启用Tomcat并配置Tomcat路径和JD ...