<!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. silverlight漂亮的文件上传进度显示原理及示例

    silverlight漂亮的文件上传进度显示原理及示例 作者:chenxumi 出处:博客园  2009/11/27 13:37:11 阅读 1219  次 概述:在网站根目录web.config里配 ...

  2. 【HAOI2007】反素数

    [题目链接] 点击打开链接 [算法] 稍加分析可知,问题等价于“求1到n中,因子个数最多的数,若有多个,求最小的” 那么我们该怎么求这个数呢? 约数个数定理 : x = p1^a1p2^a2p3^a3 ...

  3. body和html

    1 关于html和body的背景颜色的一些变现 当给body设置背景颜色时(html没有背景颜色),这时body被当做根节点被浏览器俘获,浏览器界面的背景颜色就为body的background颜色:当 ...

  4. 机器学习经典算法笔记-Support Vector Machine SVM

    可供使用现成工具:Matlab SVM工具箱.LibSVM.SciKit Learn based on python 一 问题原型 解决模式识别领域中的数据分类问题,属于有监督学习算法的一种. 如图所 ...

  5. Swift4 模式, 枚举型

    创建: 2018/03/05 完成: 2018/03/05 更新: 2018/03/10 改变标题 [Swift4 模式] -> [Swift4 模式, 枚举型] 补充RawRepresenta ...

  6. bzoj 1068: [SCOI2007]压缩【区间dp】

    神区间dp 设f[l][r][0]为在l到r中压缩的第一个字符为M,并且区间内只有这一个M,f[l][r][0]为在l到r中压缩的第一个字符为M,并且区间内有两个及以上的M 然后显然的转移是f[i][ ...

  7. bzoj 3779: 重组病毒【LCT+线段树维护dfs序】

    %.8lf会WA!!%.8lf会WA!!%.8lf会WA!!要%.10lf!! 和4817有点像,但是更复杂. 首先对于操作一"在编号为x的计算机中植入病毒的一个新变种,在植入一个新变种时, ...

  8. 洛谷P3250 [HNOI2016]网络（整体二分+树状数组+树剖）

    传送门 据说正解是树剖套堆???然而代码看着稍微有那么一点点长…… 考虑一下整体二分,设当前二分到的答案为$mid$,如果所有大于$mid$的边都经过当前点$x$,那么此时$x$的答案必定小于等于$m ...

  9. 爬虫—Selenium爬取JD商品信息

    一,抓取分析 本次目标是爬取京东商品信息,包括商品的图片,名称,价格,评价人数,店铺名称.抓取入口就是京东的搜索页面,这个链接可以通过直接构造参数访问https://search.jd.com/Sea ...

  10. ES的简单增删改查

    1.查看全部索引 GET:192.168.100.102:9200/_cat/indices 2.创建名为news的索引 PUT:192.168.100.102:9200/news 3.新增docum ...