css圆角以及利用css画出一些形状

最新推荐文章于 2021-07-16 13:19:14 发布
最新推荐文章于 2021-07-16 13:19:14 发布
阅读量698 收藏 3
点赞数
分类专栏： css效果
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43209768/article/details/100064042
版权

来源于技术胖的视频总结
1.圆角border-radius
在这里插入图片描述


    <style>
      .demo{
          width:100px;
          height: 100px;
          background:#f0f;
          margin:50px auto;
          /* border-top-left-radius:50%;
          border-top-right-radius:50%;
          border-bottom-left-radius:50%;
          border-bottom-right-radius:50%; */

          /* border-radius:50% 50% 50% 50%; */

          border-radius: 50%;
      }
    </style>
</head>
<body>
<div class="demo">

</div>

在这里插入图片描述

 .demo{
          width:100px;
          height: 100px;
          background:#f66;
          margin:50px auto;
          border-top-right-radius: 100px 10px;//x轴的值 y轴的值
      }

在这里插入图片描述

          border-radius:50px 0px 50px 0px;

2.利用css画出一个对话框
在这里插入图片描述

   <style>
      .demo{
        width:200px;
        height:30px;
        line-height:30px;
        border:1px solid green;
        margin:50px auto;
        border-radius:5px;
        position:relative;
        background:green;
      }
      .demo::before{
          content:'';
          border:7px solid transparent;
          border-right:7px solid green;   
          position:absolute;
          left:-14px;
          top:8px;   
      }
    </style>
</head>
<body>
<div class="demo">
    hello,I am fanrenfeng
</div>

3.利用css画菱形和平行四边形
利用伪元素
在这里插入图片描述

    <style>
      .demo::before{
          content:'';
          border:50px solid transparent;
          border-right:50px solid green; 
          position: relative;;
          float:left;
      }
      .demo::after{
          content:'';
          border:50px solid transparent;
          border-left:50px solid green;   
          position:absolute;
      }
    </style>
</head>
<body>
<div class="demo">
</div>

利用transform:rotate属性

 .demo{
        width:100px;
        height: 100px;
        background:violet;
        margin:50px auto;
        -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        transform: rotate(45deg);
    }

在这里插入图片描述
x轴倾斜（左右倾斜）

   .demo{
        width:100px;
        height: 50px;
        background:violet;
        margin:50px auto;
        -webkit-transform: skew(45deg);
        -ms-transform: skew(45deg);
        -o-transform: skew(45deg);
        transform: skew(45deg);
    }

y轴倾斜（上下倾斜）
在这里插入图片描述

 .demo{
        width:100px;
        height: 50px;
        background:violet;
        margin:50px auto;
        -webkit-transform: skew(0deg,45deg);
        -ms-transform: skew(0deg ,45deg);
        -o-transform: skew(0deg ,45deg);
        transform: skew(0deg ,45deg);
    }

4.利用css3画五角星和六角星
五角星其实就是三个三角形的旋转拼接而已，不过角度不好把握，这个自己去测量吧，丑丑的五角星
在这里插入图片描述

    <style>
    .demo{
        width:0px;
        height: 0px;
        margin:100px auto;
        border:100px solid transparent;
        border-bottom:70px solid red;
        position:relative;
        -webkit-transform: rotate(35deg);
        -ms-transform: rotate(35deg);
        -o-transform: rotate(35deg);
        transform: rotate(35deg);
    }
    .demo::before{
        content: '';
        border:30px solid transparent;
        border-bottom:80px solid red;
        position:absolute;
        -webkit-transform: rotate(-35deg);
        -ms-transform: rotate(-35deg);
        -o-transform: rotate(-35deg);
        transform: rotate(-35deg);
        top:-83px;
        left:-86px;
    }
    .demo::after{
        content: '';
        border:100px solid transparent;
        border-bottom:70px solid red;
        position:absolute;
        -webkit-transform: rotate(-70deg);
        -ms-transform: rotate(-70deg);
        -o-transform: rotate(-70deg);
        transform: rotate(-70deg);
        top:-57px;
        left:-162px;
    }
    </style>
</head>
<body>
<div class="demo">
</div>

六角星（一个正三角形，一个倒三角形或者一个正三角形，然后再进行旋转也可以）
在这里插入图片描述

 <style>
    .demo{
        width:0px;
        height: 0px;
        margin:100px auto;
        border:100px solid transparent;
        border-bottom:150px solid cadetblue;
        position:relative;
    }
    .demo::before{
        content:'';
        border:100px solid transparent;
        border-top:150px solid cadetblue;
        position: absolute;
        left:-100px;
        top:50px
    }
    </style>
</head>
<body>
<div class="demo">
</div>

5.利用css3画五边形和六边形
在这里插入图片描述

  <style>
    .demo{
        width:150px;
        height: 0px;
        margin:200px auto;
        border:30px solid transparent;
        border-top:100px solid cadetblue;
        position:relative;
    }
    .demo::before{
        content:'';
        width:0px;
        height: 0px;
        border:105px solid transparent;
        border-bottom:88px solid cadetblue;
        position: absolute;
        top:-293px;
        left:-30px;
    }
    </style>
</head>
<body>
<div class="demo">
</div>

在这里插入图片描述

    <style>
    .demo{
        width:100px;
        height: 55px;
        margin:100px auto;
        background:red;
        position:relative;
    }
    .demo::before{
        content:'';
        position: absolute;
        width:0px;
        height: 0px;
        border:50px solid transparent;
        border-bottom:25px solid red;
        top:-75px;
    }
    .demo::after{
        content:'';
        position: absolute;
        width:0px;
        height: 0px;
        border:50px solid transparent;
        border-top:25px solid red;
        top:55px;
    }
    </style>
</head>
<body>
<div class="demo">
</div>

5.利用css3画心形和蛋形
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="src/index.js"></script>
    <title>Document</title>

    <style>
    .demo{
        width:100px;
        height: 90px;
        margin:100px auto;
        position:relative;
    }
    .demo::before{
        content:'';
        position:absolute;
        width:50px;
        height:80px;
        background:red;
        border-radius: 40px 40px 0px 0px;
        -webkit-transform-origin: 0 100%;
        -moz-transform-origin:0 100%; 
        -ms-transform-origin: 0 100%;
        -o-transform-origin: 0 100%;
        transform-origin: 0 100%;
        -webkit-transform: rotate(-45deg);
        -moz-transform:rotate(-45deg);
        -ms-transform: rotate(-45deg);
        -o-transform: rotate(-45deg);
        transform: rotate(-45deg);
        left:50px;
    }
    .demo::after{
        content:'';
        position:absolute;
        width:50px;
        height:80px;
        background:red;
        border-radius: 40px 40px 0px 0px;
        -webkit-transform-origin: 100% 100%;
        -moz-transform-origin:100% 100%; 
        -ms-transform-origin: 100% 100%;
        -o-transform-origin: 100% 100%;
        transform-origin: 100% 100%;
        -webkit-transform: rotate(45deg);
        -moz-transform:rotate(45deg);
        -ms-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        transform: rotate(45deg);
    }
    </style>
</head>
<body>
<div class="demo">
</div>
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="src/index.js"></script>
    <title>Document</title>

    <style>
    .demo{
        width:126px;
        height: 180px;
        margin:100px auto;
        background:#Fa3;
        border-radius:50% 50% 50% 50%/60% 60% 40% 40%
    }

    </style>
</head>
<body>
<div class="demo">
</div>
</body>
</html>

6.利用css3太极阴阳图
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <script src="src/index.js"></script>
    <title>Document</title>

    <style>
      body {
        background: #ccc;
      }
      .demo {
       width:150px;
       height:300px;
       margin:100px auto;
       background:#fff;
       border-left:150px solid black;
       border-radius:50%;
       position:relative;
      }
      .demo::before{
          content:'';
          position:absolute;
          width:0px;
          height:0px;
          padding:25px;
          border-radius:50%;
          border:50px solid black;
          background:#fff;
          left:-75px;
      }
      .demo::after{
          content:'';
          position:absolute;
          width:0px;
          height:0px;
          padding:25px;
          border-radius:50%;
          border:50px solid #fff;
          background:black;
          left:-75px;
          top:150px;
      }
    </style>
  </head>
  <body>
    <div class="demo"></div>
  </body>
</html>
bug的生产者
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
使用CSS写出三角形、圆形、平行四边形、梯形
kaelyn_X的博客
10-14 4335
学会使用CSS3写出三角形、圆形、平行四边形和梯形，最后画出一个聊天气泡。
css//用css画一个三角形、梯形
weixin_37877794的博客
07-21 145
参考：纯 CSS 实现绘制各种三角形（各种角度） 掌握原理很重要！！！然后学会灵活变通。 <template> <div> <div class="triangleMe" /> <div class="tixing" /> </div> </template> <script> export default { } </script> <style scoped> .tri
css画正六边形的两种方法
12-11
说下两种css 制作正六边形的方法。 先看一下结果： 在之前要先了解一下正六边形内角和边的关系，正六边形的每个内角是60deg，如图（√3其实是根号3）： 方法一：原理把正六边形分成三部分，左中右分别是：before部分，div部分，after部分，如图： before三角形部分是div的before伪元素，after三角形部分是div的after伪元素。 html代码： <div class='div'></div> css代码： .div { position: relative; width: 50px;
用css绘制各种形状
weixin_34410662的博客
04-26 158
自适应的椭圆 1.自适应的椭圆 实现方式是通过border-radius这个属性；border-radius它可以单独指定水平和垂直半径。用 / 分隔这两个值。并且该属性的值不仅可以接受长度值，还能接收百分比的值。百分比的值会基于元素的尺寸进行解析，宽是水平半径的解析，高是垂直半径的解析。 所以可以把两个半径的值都设置成50%； bord...
CSS3实现平行四边形
邓惠子飞吧
11-04 4166
变换：skewX（-45deg）可以形成平行四边形。但是里面的内容也会跟着倾斜 解决方案： 嵌套元素方案：对内容再一次应用反向的歪斜（）变形，从而抵消容器的变形效果缺点是不得不使用额外的HTML元素包裹内容  div{ transform: skewX(-45deg) } div&gt;div{ transform: skewX(45deg) } &lt;div&...
CSS制作的32种图形效果[梯形|三角|椭圆|平行四边形|菱形|四分之一圆|旗帜]
dmtnewtons的专栏
11-15 3万+
转载链接：http://www.w3cplus.com/css/css-simple-shapes-cheat-sheet
CSS的圆角和定位实现太极
weixin_46370067的博客
02-22 260
逆战班第二周：CSS的圆角和定位实现太极图 主要用到的有圆角boorder-radius,定位 效果图： 先写第一个半圆 先写出一个300*300的方形，然后居中，设置边框（黑色设置黑色，白色设置白色），添加圆角，并相对定位 第二个半圆 把两个圆定位合成一个圆，给白色定位 再做两个圆环并绝对定位 最后效果 全部代码如下 ...
如何使用CSS3画出一个叮当猫
10-23
【CSS3绘制叮当猫详解】 CSS3是一种强大的样式表语言，它允许开发者通过纯CSS创建复杂...通过熟练掌握CSS3的几何形状、渐变、阴影、变换和动画等特性，开发者可以创造出各种各样的视觉效果，让网页设计更加生动有趣。
CSS的一些圆角图形实例分享
09-24
首先，让我们来看看一个基本的CSS圆角实现方法。通过使用`border-radius`属性，我们可以轻松地为元素的角落添加圆角。例如，`border-radius: 10px`将使元素的四个角落都具有10像素的圆角。然而，这个例子并不涉及3D...
css+javascript 实现扇形导航动画效果
06-08
在这个扇形导航中，CSS用于定义每个导航项的形状、颜色、大小以及它们在页面上的位置。扇形布局可以通过使用`transform`属性和`rotate()`函数来实现，通过对每个导航项设置不同的旋转角度，我们可以创建出一个圆形的...
css3实现圆角矩形
04-11
css3实现圆角矩形 使用border-radius实现圆角，兼容到IE6
纯css 圆角实现代码
09-25
首先，我们要了解CSS圆角的基本原理。在CSS3中，通过`border-radius`属性可以直接设置元素的边框为圆角，例如`border-radius: 10px;`可以使一个元素的四个角都变为10像素的圆角。但在早期的浏览器版本中，这个功能...
css圆角提示框特效代码
03-20
本主题聚焦于“css圆角提示框特效代码”，这是一种利用CSS技术实现的具有圆角边框的提示框效果，旨在提供用户友好的界面提示信息。在所有主流浏览器中，这个效果都能得到良好的兼容性，确保了广泛的适用性。 在CSS...
CSS实现圆角，三角，五角星，五边形，爱心，12角星，8角星，圆，椭圆，圆圈，八卦
热门推荐
编程之家
08-29 5万+
CSS实现常用效果附源码和结果图，圆角，三角，爱心，五角星，六边形，12角星，无穷大，钻石，八边形，鸡蛋，八卦等等例子
html+圆角六边形,CSS3 使用clip-path创建圆角六边形
weixin_30739835的博客
07-16 1231
CSS语言：CSSSCSS确定div {display: inline-block;width: 20em;height: 20em;background: teal;-webkit-clip-path: polygon(98.66025% 45%, 99.39693% 46.5798%, 99.84808% 48.26352%, 100% 50%, 99.84808% 51.73648%, 99...
html怎么设置按钮形状六边形,带圆角的CSS六角形按钮
weixin_31108739的博客
06-22 949
我并不是说用CSS无法实现这一点,但用CSS做这件事将是一项繁琐的工作. SVG始终是用于创建这样复杂形状的推荐工具(即使使用SVG,这种特殊形状也难以创建).SVG是：>可扩展,因此它们有助于响应式设计,形状可以拉伸以匹配内容>让我们更多地控制形状>易于维护>允许我们使用偶数渐变或非纯色背景作为元素,如this answer中所做的那样(用于带圆角的正六边形)在SVG中,...
纯css实现倾斜tab切换，并且加上两边圆角
卡卡西：一个擅长拷贝的前端程序员
09-11 5515
前端开发过程中难免会遇到倾斜的tab设计，并且两边要做成圆角效果，如下图： 我的想法： 1. 给每个tab项设置transform：skew(角度值)实现倾斜效果，但是，此时里边内容也会跟着倾斜，所以给内容单独加一个容器，给该容器重新设置偏转回去即可； 2. 两边的圆角，在tab项外边套一个div，给这个div设置border-radius，但是，因为此时这个父容器是被t...
Css斜四边形
hql1024的博客
12-13 1557
transform: skew(0deg, -20deg);
css3盒子阴影效果
qq_43209768的博客
08-26 1万+
box-shadow:h-shadow v-shadow blur spread color inset h-shadow:必须。水平阴影的位置。允许负值。 v-shadow:必须。垂直阴影的位置。允许负值。 blur:可选。模糊距离。 spread:可选。阴影的尺寸。 color:可选。阴影的颜色。 inset:可选。将外部阴影改为内部阴影。 <!DOCTYPE html> &lt...
CSS3学习笔记.pdf
最新发布
04-29
“CSS3学习笔记.pdf”主要介绍了CSS3的基本概念和边框相关的特性，包括选择器、边框样式、边框圆角、边框阴影以及边框图像等。 在深入探讨CSS3之前，先来理解CSS3的核心地位。CSS3是层叠样式表（Cascading Style ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值