css3 平行四边形、大括弧

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>平行四边形 与大括号</title>
 6 </head>
 7 <style>
 8     .div1{
 9     width:300px;
10     height:50px;
11     border-radius: 5px;
12     background-color: #da8;
13     transform: skew(15deg,0);
14 }
15 </style>
16 <body>
17 <!-- 平行四边形 -->
18     <div class="div1"></div>
19     <br><br><br>
20 <!-- 大括弧 -->
21     <div class="quote"><div></div></div>
22     <style type="text/css">
23     .quote {
24         position: relative;
25         width: 100%;
26         height: 40px;
27     }
28     .quote::before, .quote::after, .quote ::before, .quote ::after {
29         content: '';
30         display: block;
31         position: absolute;
32         width: calc(50% - 20px);
33         height: 20px;
34         border-style: solid;
35         border-color: #000;
36         border-width: 0;
37     }
38     .quote ::before, .quote ::after {
39         top: 0;
40         border-bottom-width: 1px;
41     }
42     .quote::before, .quote::after {
43         top: 20px;
44         border-top-width: 1px;
45     }
46     .quote ::before {
47         left: 0;
48         border-bottom-left-radius: 20px;
49     }
50     .quote ::after {
51         right: 0;
52         border-bottom-right-radius: 20px;
53     }
54     .quote::before {
55         left: 20px;
56         border-top-right-radius: 20px;
57     }
58     .quote::after {
59         right: 20px;
60         border-top-left-radius: 20px;
61     }
62     </style>
63 </body>
64 </html>

转载于:https://www.cnblogs.com/arealy/p/7736856.html

css3 平行四边形、大括弧相关推荐

大括弧之战代码风格
伟大的大括弧之战已经持续了多年,开发人员们仍然在毫不让步地争吵着大括弧在代码中应该摆放的位置.在多人的项目组里,每个人都给别人的代码重新排版是件很糟糕的事情,版本记录里大量的无用格式变化淹没了重要的有 ...
移动换H5 の纯CSS3实现大转盘抽奖布局 by FungLeo
移动换H5 の纯CSS3实现大转盘抽奖布局 by FungLeo 前言本教程不涉及JS控制旋转部分,也不涉及后端输出抽奖结果部分.这篇教程讲的是如何去实现大转盘抽奖的布局. 在制作大转盘抽奖的时候 ...
android自定义大括弧
前几天和公司的android大神聊天,提到他之前写了一个自定义的大括弧控件,面试的时候,难倒了很多人.当时闲着没事,也试了试,发现的确有点难度,也没做出来.刚好这两天做了一些自定义View,所以就又尝 ...
【PHP】json返回大括弧和中括弧，json返回{}和[]
PHP json返回大括弧和中括弧,json返回**{}和[]** 有时候,前端要求返回大括弧和中括弧前端要求返回**{}和[]** 返回中括弧很简单,只需要使用 array() 空的array ...
传智播客html css3笔记,传智播客详解Css3九大常用属性
在Css3的学习和实际操作中,我们经常会接触到一些常用属性,比如字体.文本.列表和背景等.下面,传智播客将对常用的Css3九大属性进行详解. 1.传智播客详解Css3九大常用属性-字体 l Font- ...
css3抽奖转盘,从零制作CSS3抽奖大转盘
今天的任务是做一个纯CSS3的还算比较漂亮的抽奖大转盘,也就是下图效果. 我只说思路和重要的CSS3代码. Paste_Image.png 外盘外盘是指有彩灯的深橙色圆环,以及圆环的外边线. 外盘设 ...
web前端入门到实战：CSS3两大实用属性，以及网页制作技巧
一.使用 :not() 在菜单上应用/取消应用边框我们通常的做法是先给每个菜单项设置边框,然后在设置最后一个菜单的边框为零 /* add border */ .nav li {border-righ ...
HTML5+CSS3期末大作业——城市简介
页面展示: 首页源码: <!DOCTYPE html> <html lang="en"> <head><meta charset=&quo ...
HTML5+CSS3期末大作业：电影网站设计——黑色扁平的电影工作室静态网页学生DW网页设计作业成品 web课程设计网页规划与设计计算机毕设网页设计源码
HTML5期末大作业:电影网站设计--黑色扁平的电影工作室静态HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计计算机毕设网页设计源码常见网页设计作业题 ...

css3 平行四边形、大括弧

css3 平行四边形、大括弧相关推荐

最新文章

热门文章

css3 平行四边形 、大括弧

css3 平行四边形 、大括弧相关推荐

最新文章

热门文章

css3 平行四边形、大括弧

css3 平行四边形、大括弧相关推荐