CSDNRGY 2017-06-23 09:08 采纳率: 87.5%
浏览 1579
已采纳

怎么把div画成这种形状

图片说明

  • 写回答

5条回答 默认 最新

  • DonkeyMini 2017-06-23 10:21
    关注
     <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>画图</title>
    <style>
        body{padding: 100px;}
        *{margin:0;padding: 0}
        li{list-style: none;}
        .container{margin:100px auto;position: relative;}
        .quadrangle{}
        .first,.other li{width:200px;height: 36px;margin-right: 5px;}
        .first{border-top-left-radius: 18px;border-bottom-left-radius: 18px;border-top-right-radius: 15px;float: left;border: 2px solid #77c077;-webkit-transform: skew(30deg);}
        .other{float: left;}
        .other li{float: left;border-radius: 10px;border: 2px solid #77c077;
            -webkit-transform: skew(30deg);}
        .line {width: 1032px;background: #689731;height: 5px;position: absolute;top: 36px;border-bottom-left-radius: 20px;left: 18px;border-bottom-right-radius: 20px;}
    </style>
</head>
<body>
    <div class="container">
        <!-- 四边形 -->
        <div class="quadrangle">
            <div class="first"></div>
            <ul class="other">
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
        <!-- 横线 -->
        <div class="line"></div>
    </div>
</body>
</html>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(4条)

报告相同问题？

悬赏问题

  • ¥15 MCNP里如何定义多个源？
  • ¥20 双层网络上信息-疾病传播
  • ¥50 paddlepaddle pinn
  • ¥20 idea运行测试代码报错问题
  • ¥15 网络监控：网络故障告警通知
  • ¥15 django项目运行报编码错误
  • ¥15 请问这个是什么意思？
  • ¥15 STM32驱动继电器
  • ¥15 Windows server update services
  • ¥15 关于#c语言#的问题：我现在在做一个墨水屏设计，2.9英寸的小屏怎么换4.2英寸大屏