<!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. JDBC连接数据库核心代码

    1.Oracle数据库   Class.forName("oracle.jdbc.driver.OracleDriver").newInstance();   String url ...

  2. YTU 2887: D--机器人Bill

    2887: D--机器人Bill 时间限制: 1 Sec  内存限制: 128 MB 提交: 112  解决: 22 题目描述 最近,Dr. Jiang 新设计一个机器人Bill.Bill很聪明,会做 ...

  3. 疯狂JAVA——数组

    java是静态语言,java数组也是静态语言 静态初始化: String[] a = new String[]{ "我"}; String[] b = { "你" ...

  4. aliyun 日志服务（Log Service，Log）是针对日志场景的一站式服务

    日志服务(Log Service,Log)是针对日志场景的一站式服务,在阿里巴巴集团内部被广泛使用.用户无需开发就能快捷完成日志生命周期中采集.消费.投递以及查询功能. 日志服务当前提供如下功能 日志 ...

  5. jsDoc 使用及配置！

    原文地址:http://www.cnblogs.com/hxling/archive/2012/11/27/2791067.html jsDoc 说白了就是帮助你生成JS的文档,但有个前提,就是你编写 ...

  6. React VSCode插件

    可以安装2个插件,一个是 Atuo Rename Tag 一个 Auto Close Tag 这样就好都了

  7. Codeforces Round #409(Div.2)

    传送门 题意 A.询问最多改变一个字符的字符串"VK"子串数量 B.f(x,z)=y,给出x,y,求z For example, f("ab", "b ...

  8. bzoj 2157: 旅游【树链剖分+线段树】

    裸的树链剖分+线段树 但是要注意一个地方--我WA了好几次才发现取完相反数之后max值和min值是要交换的-- #include<iostream> #include<cstdio& ...

  9. 【插件开发】—— 12 GEF入门

    介绍 前面也简单的介绍了一下插件开发的相关知识,下面主要就介绍一下GEF的相关使用.由于最近使用到编辑器这部分的操作,因此就跳过其他的内容,先介绍下GEF的相关知识. 前文回顾 1 插件学习篇 2 简 ...

  10. 搜索刷题记录by cellur925

    我好菜啊!连暴搜都不会! 注意边界退出! 特开此帖,记录搜索学习之路!(逃) 1.全排列 2.八皇后 3.数的划分 由于此题有同一划分方法算一个的限制,我们为了避免搜多,可以使搜出的结果满足单调不降性 ...