用CSS画圆、半圆、线性箭头

一、css画半圆

border-radius
可以设置盒子四边的弧度。可以设置%,px等单位。

在css中利用border-radius可以画出圆形,半圆,等图案

半圆需要两个块元素,两个块元素分别设置一个对应的角即可。

    <style>
        .a{
            width: 200px;
            height: 200px;
            background-color: red;
            border-top-left-radius: 200px;
        }
        .b{
            width: 200px;
            height: 200px;
            background-color: red;
            border-bottom-left-radius: 200px;
        }
    </style>
</head>
<body>
    <div class="a"></div>
    <div class="b"></div>
</body>

平行半圆同理。

 

 

二、 css画圆

绘制一个圆形,只需要使用border-radius内缩50%即可。

        div{
            width: 300px;
            height: 300px;
            background-color: red;
            border-radius: 50%;
        }

三、 css画线性箭头

原理和实心箭头一样,不过需要旋转一下元素。

1.先设置div属性

div{
    width: 100px;
    height: 100px;
    border-color: red red transparent transparent;
    border-width: 5px;
    border-style: solid;
}

 

 2.设置旋转

transform: matrix(0.75, 0.75, -0.75, 0.75, 0, 0);

 

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值