平行四边形

最新推荐文章于 2021-05-30 10:33:37 发布
最新推荐文章于 2021-05-30 10:33:37 发布
阅读量510 收藏 1
点赞数
分类专栏： CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiaoxiaoluckylucky/article/details/86353095
版权

1.需求：平行四边形边框，四边形里面的文字水平垂直居中显示。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .wrap1 {
            display: inline-block;
            border: 1px solid red;
            transform: skew(45deg);
            padding: 0 10px;
        }
        .txt1 {
            transform: skew(-45deg);
        }
        .wrap2 {
            position: relative;
            display: inline-block;
            padding: 0 10px;
        }
        .wrap2::before {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            z-index: -1;
            background: #fff;
            transform: skew(45deg);
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <!-- 方法一-->
    <div class="wrap1">
        <div class="txt1">这是文字1</div>
    </div>
    <!-- 方法二-->
    <div class="wrap2">
        这是文字2
    </div>
</body>

</html>

介绍两种方法：

方法一：父子元素，父元素设置transform:rotate(45deg),里面的子元素transform:rotate(-45deg);

方法二：使用伪元素

效果图如下：

2.需求：在菱形里面放一张图片,图片无压缩

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin:0;
            padding:0;
        }
       .warp1 {
            width: 376.18px;
            height: 376.18px;
            border: 1px solid red;
            transform: rotate(45deg);
            margin: 10%;
            position: relative;
            overflow: hidden;
        }
        .img1 {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%) rotate(-45deg);
        }
    </style>
</head>
<body>
    <div class="warp1">
        <img src="./1.png" alt="" class="img1">
    </div>
</body>

</html>

注意点：图片需是正方形图片，菱形的长度=(图片长度/2)*√2，这样才能保证图片刚好在菱形中完整显示出来；例如图片长度2，那么菱形长度=（2/2)*√2。

效果图如下

3.需求：1/4圆，1/2圆，椭圆

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin:0;
            padding:0;
        }
        .div1{
            display: inline-block;
            width: 60px;
            height: 60px;
            border: 1px solid red;
        }
        .left-t {
            border-radius: 100% 0 0 0;
        }
        .right-t {
            border-radius:0 100% 0 0;
        }
        .left-b {
            border-radius: 0 0 0 100% ;
        }
        .right-b {
            border-radius:0 0 100% 0;
        }
        .div2{
            display: inline-block;
            border: 1px solid red;
        }
        .left {
            width: 30px;
            border-radius: 30px 0 0 30px;
            height: 60px;
        } 
        .right {
            width: 30px;
            height: 60px;
            border-radius: 0 30px 30px 0;
        } 
        .top {
            width: 60px;
            height: 30px;
            border-radius: 30px 30px 0 0;
        } 
        .bottom {
            width: 60px;
            height: 30px;
            border-radius:0 0 30px 30px ;
        }
        .top-circle {
            border-radius: 50% 50% 0 0;
        }
        .bottom-circle {
            border-radius: 0 0 50% 50%;
        }
        .left-circle{
            border-radius: 50% 0 0 50%;
        }
        .right-circle {
            border-radius: 0 50% 50% 0;
        }
        .ellipse{
            border-radius: 50%/100% 100% 0 0;
        }
    </style>
</head>
<body>
    <p>左上边是1/4圆</p>
    <div class="left-t div1"></div>

    <p>右上边是1/4圆</p>
    <div class="right-t div1"></div>

    <p>左下边是1/4圆</p>
    <div class="left-b div1"></div>

    <p>右下边是1/4圆</p>
    <div class="right-b div1"></div>

    <p>左边是1/2圆</p>
    <div class="left div2"></div>

    <p>右边是1/2圆</p>
    <div class="right div2"></div>

    <p>上边是1/2圆</p>
    <div class="top div2"></div>

    <p>下边是1/2圆</p>
    <div class="bottom div2"></div>

    <p>上边是1/2圆,下边是长方形</p>
    <div class="top-circle div1"></div>

    <p>下边是1/2圆,上边是长方形</p>
    <div class="bottom-circle div1"></div>

    <p>左边是1/2圆,右边是长方形</p>
    <div class="left-circle div1"></div>

    <p>右边是1/2圆,左边是长方形</p>
    <div class="right-circle div1"></div>

    <p>上边是椭圆</p>
    <div class="ellipse div1"></div>
</body>

</html>

注意点：border-radius属性，展开式属性，必须使用空格分隔。同个属性可用/分开，分别表示水平半径和垂直半径。

效果图：

3.需求：单边阴影

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin:0;
            padding:0;
        }
        p{
            margin:10px 0 5px 0;
        }
        div {
            width:50px;
            height:50px;
            background:#ccc;
        }
        .top {
            box-shadow: 0 -5px 2px -2px rgba(103, 95, 95, 0.6);
        }
        .bottom {
            box-shadow: 0 5px 2px -2px rgba(103, 95, 95, 0.6);
        }
        .left {
            box-shadow: -5px 0 2px -2px rgba(103, 95, 95, 0.6);
        }
        .right {
            box-shadow: 5px 0 2px -2px rgba(103, 95, 95, 0.6);
        }
        .top-r {
            box-shadow: 5px -5px 6px -2px rgba(103, 95, 95, 0.6);
        }
        .top-b {
            box-shadow: 0 -5px 2px -2px rgba(103, 95, 95, 0.6), 0 5px 2px -2px rgba(103,95,95,0.6);
        }

    </style>
</head>
<body>
    <p>上边阴影</p>
    <div class="top"></div>
    <p>下边阴影</p>
    <div class="bottom"></div>
    <p>左边阴影</p>
    <div class="left"></div>
    <p>右边阴影</p>
    <div class="right"></div>
    <p>上右边阴影</p>
    <div class="top-r"></div>
    <p>上下边阴影</p>
    <div class="top-b"></div>
</body>

</html>

注意点：box-shadow: X Y 模糊半径R1  扩张半径R2  颜色值;

X是会生成一个相对于元素向右偏移的阴影，如果想向右偏移，则X为负值；

Y是会生成一个相对于元素向下偏移的阴影，如果想向上偏移，则为正值；

R1是模糊半径，R1越大，模糊的半径越大，那么阴影颜色就越淡；

R2是扩张半径，R2越大，阴影的半径越大，写单边阴影时，R2=-R1;

box-shadow支持多属性，属性之间用","分开，例如写上下属性时，需用到box-shadow: 0 -5px 2px -2px rgba(103, 95, 95, 0.6), 0 5px 2px -2px rgba(103,95,95,0.6);

效果图：

xiaoxiao无脸男
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
关于平行四边形判断问题
CAOSHUCAOSHU的博客
07-18 792
原题链接 在平面内给定的若干个点中，是否存在 4 个不同的点能够构成“平形四边行”。(即使是两个坐标完全相同的点，只要它们的下标不同，就认为这两个点是不同的。) 输入： 1<n<1e5,-1000<x<1000,-1000<y<1000 分析： 若四个点能构成一个平行四边形，则对角线的中点重合。所以要判断两对点是否可以组成平行四边形，只要看中点是否相同即可。 由x、y的范围，可将medX=x[i]+x[j]+2000,medY=y[i]+y[j]+2000作为中点的坐标，
android shape样式
03-17
android shape可以帮助我们实现很多的效果，比如：圆角、虚线边框、部分圆角、颜色的渐变等效果，同时源文件给出了android4.0系统下虚线会变成实线的解决办法。
实现一个平行四边形
weixin_33755847的博客
02-20 551
需求如题，想了下用普通的变换如旋转、缩放、位移都是无法实现的。无奈之下谷歌，网友们提供了两个实现方式，第一个是通过border的方式，这个比较tricky；第二种方式很吸引人，原来变换中除了我上面提到的三种方式之外，还有一个skew，英文意思是歪曲，正是实现平行四边形的利器。 width: 200px; height: 100px; ba...
Qt Charts 画平行四边形
flyfish
01-09 1440
Qt Charts 画平行四边形 flyfish #include #include using namespace QtCharts; int main(int argc, char *argv[]) { QApplication a(argc, argv); QGraphicsScene scene(0, 0, 600, 560); QGraphicsV
平行四边形专题
growthmindset的博客
05-30 299
平行四边形证明 五个证明方向： 1、两组对边分别平行； 2、一组对边平行且相等； 3、两组对边分别相等； 4、两条对角线互相平分； 5、两组对角分别相等； 矩形、菱形证明 一、在平行四边形基础上 1、一个内角为直角； 2、对角线相等； 二、跳过平行四边形的证明，直接在四边形基础上证出 1、三个内角为直角的四边形； 2、四个内角都相等的四边形； 求某条线段长度、证明线段1=线段2+线段3 此类题型一般都是利用转化思想，利用某两条线段长度相等进行线段转移，尽可能往题目所需证明的方向靠拢！ 相关知识点理解记忆 直
HDU 5964 平行四边形/Pland 【平面几何】
MartaYang的博客
01-30 639
这是CCPC2016合肥站的D题，给定两条直线L和L'，给定n个待选的点，从这n个点中选出两个B和B'，再在两条直线上分别确定A和A'，使得满足AA'和BB'的中点重合。求满足条件的ABA'B'构成的平行四边形的面积最大值。
android自定义四边形,以编程方式在Android中创建平行四边形绘图
weixin_39661405的博客
05-26 391
所以我自己能够回答这个问题......我使用路径来创建drawables，然后将它们拼接在一起以创建平行四边形。public Drawable createThumbDrawable(boolean checked){Path path = new Path();path.moveTo(0, 0);path.lineTo(1, 0);path.lineTo(1, 1);path.lineTo(0,...
平行四边形（几何）题解
米莱虾
05-23 1584
UPC NO.17场 问题 E: 平行四边形 时间限制: 3 Sec 内存限制: 128 MB 题目描述 求平面上n个点构成的平行四边形个数。 输入 一行一个数n。 接下来n行，每行两个数x,y，表示这个点的坐标为(x,y)。 保证任意两点不重合，任意三点不共线。 输出 一行一个整数表示平行四边形个数。 样例输入 4 0 1 1 0 1 1 2 0 样例输出 1 提示 对于100%的数据：n≤1500。 题解： 首先回顾一下判定平行四边形的5大方法： 1、两组对边分别平行的四边形是平行四边形（定义判定法）
用‘*’输出一个平行四边形
ZDF0414的专栏
03-22 7406
#include int main() { int i=0; int j=0; int k=0; for(i=0;i<5;i++) { for(j=0;j<=i;j++) { printf(" "); } for(k=0;k<5;k++) { printf("*"); } printf("\n"); } printf("\n"); retur
用php做平行四边形,元素形状之“平行四边形”_html/css_WEB-ITnose
weixin_31313019的博客
03-11 402
设计场景 在视觉设计中，平行四边形往往可以传达出一种 动感只让容器的形状倾斜，而保持其内容不变嵌套元素解决方案结构风格 .button { display: inline-block; padding: 16px 32px; background-color: #58a; color: #fff; text-decoration: none; transform: ske...
一个平行四边形可以分成四个_初中数学平行四边形的性质知识点总结，早看早受益！...
weixin_35626077的博客
01-17 2089
中考数学助力轻松升学！初中数学平行四边形的性质知识点总结(一)知识点总结1.定义：两组对边分别平行的四边形叫平行四边形2.平行四边形的性质(1)平行四边形的对边平行且相等；(2)平行四边形的邻角互补，对角相等；(3)平行四边形的对角线互相平分；3.平行四边形的判定平行四边形是几何中一个重要内容，如何根据平行四边形的性质，判定一个四边形是平行四边形是个重点，下面就对平行四边形的五种判定方法...
C语言程序设计第四版(谭浩强） 6.11 用*输出平行四边形图案
冰糖的博客
06-04 4759
//*作者：冰糖 //*日期：2018年11月13日 //*章节：第六章 利用数组处理批量数据 //*题号：11 //*题目：输出平行四边形 #include<stdio.h> int main() { int i,j; for(i=1;i<=5;i++) { for(j=1;j<i;j++) printf(" "); for(j=1;j<=5;j++) printf(" *"); printf("\n"); } return 0; } ...
python平行四边形的构造,8数培优：揭秘构造平行四边形解题策略，学霸必备
weixin_30930625的博客
03-26 571
行四边形具有对边相等、对角相等、对角线互相平分等性质，解决某些几何题时，若能根据平行四边形的判定，巧妙地构造出平行四边形，就会化难为易、化繁为简，证明过程简捷。现举例说明。策略1：利用平行线构造平行四边形1．点E为平行四边形ABCD中DC边的延长线上的一点，且CE＝DC，连接AE分别交BC、BD于点F、G，连接AC交BD于点O，连接OF．求证：DE＝4OF．【分析】连接BE，易证四边形ABEC是平...
平行四边形的定义以及判定和性质
热门推荐
蔡甸数学
12-06 1万+
平行四边形的定义：两组对边分别平行的四边形叫做平行四边形. 性质：①平行四边形两组对边分别平行； ②平行四边形的两组对边分别相等； ③平行四边形的两组对角分别相等； ④平行四边形的对角线互相平分. 判定：①两组对边分别平行的四边形是平行四边形； ②两组对边分别相等的四边形是平行四边形； ③两组对角分别相等的四边形是平行四边形； ④对角线互相平分的四边形是平行四边形； ⑤一组对边平行且相等的四边形是平行四边形. ...
android自定义四边形,android – 如何创建平行四边形的形状背景？
weixin_39638603的博客
05-26 430
作为@ mmlooloo的回答的替代方案,我建议使用xml-drawable解决方案(因为你还没有强调你正在寻找什么样的解决方案).在下面的示例中,我使用了一般视图,但您可以使用任何其他视图.这是视图android:layout_width="100dp"android:layout_height="40dp"android:layout_centerInParent="true"android:...
latex 平行四边形符号
最新发布
06-14
在 LaTeX 中，创建平行四边形的符号通常使用特定的数学命令和符号。平行四边形可以用不同的方法表示，常见的有矩形（Rectangle）和菱形（Diamond）。以下是两个基本的示例： 1. **矩形**：使用 `\Box` 命令，它表示...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值