zoukankan html css js c++ java

纯 CSS 绘制图形（心形、六边形等）

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <style>
        div
        {
            width: 50px;
            height: 50px;
            background-color: red;
            margin: 5px;
            text-align:center;
            line-height: 50px;
        }
         /* border-radius4个参数 左上 右上 右下 左下(顺时针) */
        .box{border-radius: 50%;}
        .semi-circle{border-radius: 100px 100px 0 0;height: 50px;}
        .sector{border-radius: 100% 0 0 0;}
        /* -webkit-transform旋转 */
        .arc
        {
            border-radius: 100px 0 100px 0;
            -webkit-transform: rotate(45deg);
        }
        .triangle
        {
            background: none;
            width: 0;
            height: 0;
            border: 50px solid red;
            border-color: red transparent transparent transparent;/* transparent透明 */
        }
        .rectangle::first-letter{ color: white;}
        .rectangle
        {
          border-radius: 10px;
          position: relative;
        }
        /*子绝父相(子级绝对定位(absolute)父亲相对定位relative)*/
        .rectangle::before
        {
            width: 0;
            height: 0;
            border: 15px solid red;
            border-color: transparent transparent transparent green;
            content: "";
            position: absolute;
            right: -30px;
            top: 14px;
        }
        .heart{
          width: 60px;
          height: 80px;
          background: none;
           position: relative;
        }
       /*  before、after伪元素 (属于行内元素设置宽度和高度无效解决办法 absolute变成块级元素) */
        .heart::before, .heart::after
        {
            width: 100%;
            height: 100%;
            content: "";
            background-color: red;
            position: absolute;
            border-radius: 100px 100px 0 0;
            -webkit-transform: rotate(-45deg);
        }
        .heart::after
        {
         -webkit-transform: rotate(45deg);
         left: 46px;
        }
        .one,.two,.there
        {
            margin: 0;
            visibility: hidden;
        }
        .one
        {
            width: 80px;
            height: 100px;
            margin: 10px;
            background-color: red;
            -webkit-transform: rotate(120deg);
        }
        .two
        {
            width: 100%;
            height: 100%;
            background-color:royalblue;
            -webkit-transform: rotate(-60deg);
        }
        .there
        {
            width: 100%;
            height: 100%;
            background-color: yellow;
            -webkit-transform: rotate(-60deg);
            visibility: visible;
            background: url(b.jpg);     
            background-size:contain;
        }
        .one,.two
        {
            overflow: hidden;
        }
    </style>
</head>
<body>
      <div>矩形</div>
      <div class="box">圆形</div>
      <div class="semi-circle">半圆</div>
      <div class="sector">扇形</div>
      <div class="arc">弧形</div>
      <div class="triangle">
      <p style="line-height: 15px;position: relative;top: -65px;left: -7px;">三角形</p>
      </div>
      <div class="rectangle">CSS3</div>
     <div class="heart"></div>
    <div class="one">
          <div class="two">
               <div class="there"></div>
          </div>
      </div>
     
</body>
</html>

运行结果

查看全文

相关阅读:
学习笔记： js插件 —— fullPage.js （页面全屏滚动）
学习笔记： js插件 —— SuperSlide 2 （轮播图插件，PC用）
学习笔记：jqchart
学习笔记：Highcharts
js: 字符集
 代码：PC HTML——图片列表
 教程：给初学的几个小例子（待补充）
代码： html 页面小效果（集合，待补充）
MongoDB
mongodb权限机制以及扩展

原文地址：https://www.cnblogs.com/y112102/p/5206418.html