返回顶部
首页 > 资讯 > 前端开发 > JavaScript >CSS3中怎么实现各种图形
  • 803
分享到

CSS3中怎么实现各种图形

2024-04-02 19:04:59 803人浏览 泡泡鱼
摘要

css3中怎么实现各种图形,很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。1、自适应的椭圆代码如下:<div class=

css3中怎么实现各种图形,很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。

1、自适应的椭圆

代码如下:


<div class="div1"> 鼠标划上来看看</div>
<style>
.div1{  background:#fb3;  width:200px;  height:200px;  line-height:200px;
         text-align: center; border-radius: 50%;  transition: all 0.25s ease-in;
}
.div1:hover{  background: #ff1d50;  width:400px;  height:200px;  border-radius: 50%;
               -WEBkit-transition: all 0.2s ease-in;  transition: all 0.2s ease-in;
}

</style></p> <p>

CSS3中怎么实现各种图形


运动的椭圆

2、半椭圆

代码如下:


<div class="div2"></div>
<div class="div3"></div>
<style>
.div2{  background:#fb3;  width:100px;  height:100px;  border-radius: 100%  0 0 0;  transition: all 0.25s ease-in; }
.div3{  background:#fb3;  width:100px;  height:100px;  border-radius: 0  0 0 100%;  transition: all 0.25s ease-in; }

</style>

本来一个div就可以,不过我用了两个四十五度的,自己玩。

CSS3中怎么实现各种图形


半椭圆

3、平行四边形

代码如下:


<div class="div4">首先</div>
<style>
.div4{  position:relative;  width:100px;  height:100px;  line-height:100px;  text-align: center;  color: #fff; }
.div4::before {  content: '';  
 position:absolute;  top:0; right:0; bottom:0; left:0;  z-index: -1;
 background:#58a;  transfORM:skew(15deg); }
</style>

CSS3中怎么实现各种图形


平行四边形

4、平行四边形

代码如下:


<div class="div5">
   <img src="../w658.jpg"/>
</div>
<style>
.div5{
   width:100px;
 height: 100px;
   transform:rotate(45deg);
   overflow:hidden; }
.div5 >img {
 max-width:100%;
 transform: rotate(-45deg)scale(1.42);
}
</style>

CSS3中怎么实现各种图形


平行四边形

5、切角矩形

代码如下:


<div class="div6"></div>
<style>
.div6{
 width:200px;
 height:100px;
 background:#58a;
 background:
  linear-gradient(-45deg,transparent 15px, #58a 0)   right,
  linear-gradient(45deg,transparent 15px, #655 0)   left;
 background-size:50% 100%;
 background-repeat: no-repeat;
}
</style>

CSS3中怎么实现各种图形


切角矩形

6、凹角矩形

代码如下:


<div class="div7"></div>
<style>
.div7{
 width:240px;
 height:50px;
 background:#58a;
 background:
  radial-gradient(circle at top left,
  transparent 8px,#58a 0)top left,
  radial-gradient(circle at top right,
  transparent 8px,#58a 0)top right,
  radial-gradient(circle at bottom right,
  transparent 8px, #58a 0)bottom right,
  radial-gradient(circle at bottom left,
  transparent 8px,#58a 0)bottom left;
 background-size:50% 50%;
 background-repeat:no-repeat;
}
</style>

CSS3中怎么实现各种图形


凹角矩形

7、切角矩形(SVG)

代码如下:


<div class="div8"></div>
<style>
.div8{
 width:240px;
 height:50px;
 background:#58a;
 border:15px solid #58a;
 border-image:1 url('data:image/svg+xml,<svg xmlns="<a href="Http://www.w3.org/2000/svg">http://www.w3.org/2000/svg</a>" width="3" height="3" fill="%2358a">\
  <polyGon points="0,1 1,0 2,0 3,1 3,2 2,3 1,3 0,2"/></svg>');
 background-clip:padding-box; }
</style>

CSS3中怎么实现各种图形


切角矩形

8、梯形

代码如下:


<div class="div9"></div>
<style>
.div9{
 width:240px;
 height:40px;
 position:relative;
 color: white;
}
.div9:before{
 content: '';
 position:absolute;
 top: 0;
right:0;
bottom:0;
left:0;
 z-index:-1;
 background:#58a;
 transform:perspective(.5em)rotateX(5deg);
}
</style>

CSS3中怎么实现各种图形


梯形

9、梯形

代码如下:


<div class="div10"></div>
<div class="div10"></div>
<div class="div10"></div>
<div class="div10"></div>
<style>
.div10{
 float:left;
 width:60px;
 height:40px;
 position:relative;
 padding:.3em 1em 0;
}
.div10:before{
 content: '';
 position: absolute;
 width:110px;
 top:0;right:0;
 bottom:0;
 left:0;
 z-index:-1;
 background:#ccc;
 background-image:linear-gradient(
  hsla(0,0%,100%,.6),
  hsla(0,0%,100%,0));
 border:1px solid rgba(0,0,0,.4);
 border-bottom:none;
 border-radius:.5em .5em 0 0;
 box-shadow:0 .15em white inset;
 transform:perspective(.5em)rotateX(5deg);
 transform-origin:bottom;
}
</style>

CSS3中怎么实现各种图形


梯形

10、梯形

代码如下:


<div class="div11"></div>
<div class="div11"></div>
<div class="div11"></div>
<div class="div11"></div>
<style> .div11{
 float:left;
 width:60px;
 height:40px;
 position:relative;
 padding:.3em 1em 0;
}
.div11:before{
 content: '';
 position: absolute;
 width:110px;
 top:0;right:0;
 bottom:0;left:0;
 z-index:-1;
 background:#ccc;
 background-image:linear-gradient(
  hsla(0,0%,100%,.6),
  hsla(0,0%,100%,0));
 border:1px solid rgba(0,0,0,.4);
 border-bottom:none;
 border-radius:.5em .5em 0 0;
 box-shadow:0 .15em white inset;
 transform:perspective(.5em) rotateX(4deg);
 transform-origin:bottom left;
}
</style>

CSS3中怎么实现各种图形


梯形

11、div饼图

代码如下:


<div class="div12">
<div></div>
<div><div></div></div>
<div></div> <div></div>
</div>
<style>
.div12{
 float:left;
 width:100px;
 height:100px;
 border-radius: 50%;
 background: #655;
 overflow:hidden;  position:relative;
}
.div12:after{
 content:'';
 display:table;
 clear:both;
 position:absolute;
 top:0;bottom:0;left:0;right:0;
}
.div12 div{
 position:absolute;
 float:left;
 width:100px;
 height:100px;
 border-radius: 50%;
}
.div12>div:first-child{
 background-image:
  linear-gradient(to right,transparent 50%, rgba(198, 179, 129, 0.94) 0); }
.div12>div:first-child:before{
 content: '';
 display:block;
 margin-left:50%;
 height:100%;
 border-radius:0 100% 100% 0 /50%;
 background-color:#655;
 transform-origin:left;
 transform: rotate(50deg);
}
.div12>div:nth-child(2){
 background-image:
  linear-gradient(140deg,transparent 50%, rgba(35, 198, 41, 0.94) 0);
}
.div12>div:nth-child(2):before{
 content: '';
 display:block;
 margin-left:50%;
 height:100%;
 border-radius:0 100% 100% 0 /50%;
 background-color:#655;
 transform-origin:left;
 transform: rotate(145deg);
}
</style>

CSS3中怎么实现各种图形


饼图

12、饼图

代码如下:


<svg width="100" height="100">
<circle r="25" cx="50" cy="50" />
</svg>
<style>
@keyframes fillup {  to { stroke-dasharray: 100 100; } }
circle {
 fill:yellowgreen;
 stroke:#655;
 stroke-width: 50;
 stroke-dasharray:38 100;
}
svg{
 width:100px;height:100px;
 transform:rotate(-90deg);
 background:yellowgreen;
 border-radius:50%;
}
</style>

CSS3中怎么实现各种图形


饼图

13、js绘制饼图

代码如下:


<div class="pie1">20%</div>
<div class="pie2">60%</div>
<script>
function $$(selector,context) {
 context =context || document;
 var elements =context.querySelectorAll(selector);
 return Array.prototype.slice.call(elements);
}
$$('.pie1').forEach(function(pie) {
 var p = parseFloat(pie.textContent);
 var NS = "<a href="http://www.w3.org/2000/svg">http://www.w3.org/2000/svg</a>";
 var svg = document.createElementNS(NS, "svg");
 var circle =document.createElementNS(NS, "circle");
 var title = document.createElementNS(NS, "title");</p> <p>  circle.setAttribute("r", 25);  circle.setAttribute("cx",16);
 circle.setAttribute("cy",16);  circle.setAttribute("stroke-dasharray",p + 100);
 console.log(p + 100);
 svg.setAttribute("viewBox", "0 0 32 32");
 title.textContent = pie.textContent;
 pie.textContent = '';
 svg.appendChild(title);
 svg.appendChild(circle);
 pie.appendChild(svg); });
</script>
<style>
@keyframes fillup {  to { stroke-dasharray: 100 100; } }
.pie1 circle {
 fill:yellowgreen;
 stroke:#655;
 stroke-width: 50;
 stroke-dasharray:70 160;
}
.pie1 svg{
 width:100px;height:100px;
 transform:rotate(-90deg);
 background:yellowgreen;
 border-radius:50%;
}
</style>

看完上述内容是否对您有帮助呢?如果还想对相关知识有进一步的了解或阅读更多相关文章,请关注编程网JavaScript频道,感谢您对编程网的支持。

--结束END--

本文标题: CSS3中怎么实现各种图形

本文链接: https://www.lsjlt.com/news/67818.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • CSS3中怎么实现各种图形
    CSS3中怎么实现各种图形,很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。1、自适应的椭圆代码如下:<div class=...
    99+
    2024-04-02
  • css3如何实现小箭头各种图形效果
    这篇文章给大家分享的是有关css3如何实现小箭头各种图形效果的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。css实现各种图形真是太赞了,再也不用切图了,直接用css就可以实现。最常用的就是用css实现的小三角了#...
    99+
    2023-06-08
  • 怎么在Android中实现绘制各种图形
    怎么在Android中实现绘制各种图形?针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。首先自定义一个View类,这个view类里面需要一个Paint对象来控制图形的属性,需要...
    99+
    2023-05-30
    android
  • CSS怎么实现各种形状
    这篇文章给大家分享的是有关CSS怎么实现各种形状的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。CSS实现各种形状的方法:1、圆形在设置CSS时要设置宽度和高度相等,然后设置【border-radius】属性为宽度...
    99+
    2023-06-14
  • Matplotlib实现各种条形图绘制
    目录1. 条形图的绘制2. 横向条形图3. 分组条形图4. 堆叠条形图5. 条形图应用场景1. 条形图的绘制 plt.bar 方法有以下常用参数: x :一个数组或者列表,代表需要绘...
    99+
    2024-04-02
  • 如何使用css3实现各种图标效果
    这篇文章主要为大家展示了如何使用css3实现各种图标效果,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带大家一起来研究并学习一下“如何使用css3实现各种图标效果”这篇文章吧。公共样式应该说...
    99+
    2024-04-02
  • 怎么用纯css绘制各种图形
    本篇内容主要讲解“怎么用纯css绘制各种图形”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“怎么用纯css绘制各种图形”吧!1、  向上三角形  CSS核心代码 ...
    99+
    2024-04-02
  • css3中怎么实现图形3d翻转效果
    css3中怎么实现图形3d翻转效果,很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。<!DOCTYPE html&...
    99+
    2024-04-02
  • 如何使用CSS3实现11种基本图形
    这篇文章主要介绍如何使用CSS3实现11种基本图形,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!   CSS3圆角   #css3-circle{   width:150px;...
    99+
    2024-04-02
  • CSS3实现各种纹理背景效果
    <!DOCTYPE html><head><title>CSS3实现各种纹理背景效果_网页代码站(www.webdm.cn)</title><style>body{font-fam...
    99+
    2023-01-31
    纹理 背景 效果
  • 怎么用css3实现图片三角形排列
    这篇文章主要讲解了“怎么用css3实现图片三角形排列”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“怎么用css3实现图片三角形排列”吧!  当今是个读图时代...
    99+
    2024-04-02
  • css3怎么实现2D变形
    今天小编给大家分享一下css3怎么实现2D变形的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧...
    99+
    2024-04-02
  • 怎么使用CSS实现各种奇形怪状按钮
    这篇文章主要介绍“怎么使用CSS实现各种奇形怪状按钮”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“怎么使用CSS实现各种奇形怪状按钮”文章能帮助大家解决问题。先让我...
    99+
    2024-04-02
  • 怎么用css3画出各种各样的椭圆
    这篇文章主要介绍了怎么用css3画出各种各样的椭圆,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。   使用css3画出各种各样的椭圆的原理...
    99+
    2024-04-02
  • html5-Canvas如何在web中绘制各种图形
    这篇文章将为大家详细讲解有关html5-Canvas如何在web中绘制各种图形,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。 在html5中...
    99+
    2024-04-02
  • css3如何实现图片扇形呈现
    本篇内容介绍了“css3如何实现图片扇形呈现”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成! ...
    99+
    2024-04-02
  • R语言怎么利用barplot()制作条形图的各种实例
    本篇内容介绍了“R语言怎么利用barplot()制作条形图的各种实例”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!前言函数barplot()...
    99+
    2023-06-09
  • C语言实现输出各种三角形
    目录C输出各种三角形C输出各种三角形 for(i=0;i<n;i++) { for(j=0;j<=i;j++) prin...
    99+
    2022-12-08
    C语言输出三角形 C语言三角形 C语言三角形输出
  • 怎么用CSS绘制各种形状
    这篇文章主要为大家展示了“怎么用CSS绘制各种形状”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“怎么用CSS绘制各种形状”这篇文章吧。自适应的椭圆1.自适应的椭...
    99+
    2024-04-02
  • CSS3中怎么绘制不规则图形
    这篇文章给大家介绍CSS3中怎么绘制不规则图形,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。声明图形我们需要使用shape-outside 属性声明不规则图形。当前, shape-ou...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作