<!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. eclipse 显示行数

    在左侧添加断点的 地方右击 选择 Show Line Numbers

  2. windows exe程序点击可以运行,但任务计划时程序不运行

    问题描述:exe程序双击或者cmd执行都可以,但是配置了计划任务就一闪而过,并没有对应log产生.                  可能会有和我同样的问题的小伙伴,这里记录一下. 解决方法:来在St ...

  3. HDU3642 Get The Treasury —— 求矩形交体积 线段树 + 扫描线 + 离散化

    题目链接:https://vjudge.net/problem/HDU-3642 Jack knows that there is a great underground treasury in a ...

  4. 计算机设计思想 —— 代理（proxy）

    0. 理解 两个说着不同母语国家的人想要交流通话,各人说着各自的母语显然是无法沟通的,此时需要一个翻译,一个媒介(medium).中介,或者一个代理(proxy),比如通用的国际语言英语,比如全世界人 ...

  5. Combo Box (组合框)控件的使用方法

    Combo Box (组合框)控件很简单,可以节省空间.从用户角度来看,这个控件是由一个文本输入控件和一个下拉菜单组成的.用户可以从一个预先定义的列表里选择一个选项,同时也可以直接在文本框里面输入文本 ...

  6. Linux 常用命令一 ls

    一.ls命令 用于查看目录下的文件信息. ls 当前目录下都有哪些文件: wang@wang:~$ ls examples.desktop workpalce 模板 图片 下载 桌面 tools 公共 ...

  7. bzoj 4318: OSU!【期望dp】

    思路有点眼熟啊,就是设l1记录长为x的极长全1串贡献x的答案,l2记录长为x的极长全1串贡献x^2的答案,f记录真正的答案 转移的话根据n-(n-1)=1,n^2-(n-1)^2=2n-1,n^3-( ...

  8. bzoj 1444: [Jsoi2009]有趣的游戏【AC自动机+dp+高斯消元】

    https://blog.sengxian.com/solutions/bzoj-1444 orz 一直是我想错了,建出AC自动机之后,实际上这个定义是设f[i]为经过i节点的 * 期望次数 * ,因 ...

  9. bzoj 4500: 矩阵【差分约束】

    (x,y,z)表示格子(x,y)的值为z,也就是x行+y列加的次数等于z,相当于差分约束的条件,用dfs判断冲突即可. #include<iostream> #include<cst ...

  10. 【SQL】从待选项中随机选一个

    由于SQL Server没有数组类型,所以在面对“从若干待选项中选一个”这种需求时,往往要采取变通办法,比如弄个‘a|b|c’这样的字符串然后对字符串进行处理:又或者把待选项塞进一个临时表,然后把问题 ...