绘制各种图形

最新推荐文章于 2019-11-02 21:31:49 发布
最新推荐文章于 2019-11-02 21:31:49 发布
阅读量441 收藏 1
点赞数
文章标签： border-radius
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yy_9_aa/article/details/78219143
版权 
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>各种图形</title>
    <style   type="text/css">
     *{
         margin: 0;
         padding: 0;
     }
         body{
             background-color: gainsboro;
         }
     body, ul, li, dl, dt, dd, h1, h2, h3, h4, h5 {
         margin: 0;
         padding: 0;
     }

     body {
         background-color: #F7F7F7;
     }
     .main:after {
         content: '';
         clear: both;
         display: block;
     }
     .main .item {
         width: 210px;
         height: 210px;
         margin: 0 30px 30px 0;
         display: flex;
         position: relative;
         background-color: #FFF;
         float: left;
         box-shadow: 2px 2px 5px #CCC;
     }
     .main .item:after {
         content: attr(data-brief);
         display: block;
         width: 100%;
         height: 100%;
         text-align: center;
         line-height: 210px;
         position: absolute;
         top: 0;
         left: 0;
         color: #FFF;
         font-family: '微软雅黑';
         font-size: 18px;
         background-color: rgba(170, 170, 170, 0);
         z-index: -1;
         transition: all 0.3s ease-in;
     }
     .main .item:hover:after {
         background-color: rgba(170, 170, 170, 0.6);
         z-index: 100;
     }
     .main .item:nth-child(4n) {
         margin-right: 0;
     }
     .border-radius {
         width: 180px;
         height: 180px;
         margin: auto;
         border: 1px solid blueviolet;
         /*border-radius: 50% 30% 20%;*/
     }
     /*拱形*/
     .item:nth-child(1) .border-radius {
         border-radius: 90px;
     }
     /*拱形*/
     .item:nth-child(2) .border-radius {
         border-radius: 90px 90px 0 0;
     }
     /*半圆*/
     .item:nth-child(3) .border-radius {
         height: 90px;
         border-radius: 90px 90px 0 0;
     }
     /*左上角*/
     .item:nth-child(4) .border-radius {
         /*height: 90px;*/
         border-radius: 90px 0 0 0;
     }
     .item:nth-child(5) .border-radius {
         width: 90px;
         height: 90px;
         border-radius: 90px 0 0 0;
     }
     /*横着的椭圆*/
     .item:nth-child(6) .border-radius {
         height: 90px;
         /*border-radius: 50%;*/
         border-radius: 90px 90px 90px 90px / 45px 45px 45px 45px;
         /*border-radius: 45px / 90px;*/
     }
     /*竖着的椭圆*/
     .item:nth-child(7) .border-radius {
         width: 90px;
         border-radius: 45px 45px 45px 45px / 90px 90px 90px 90px;
     }
     /*半个横着的椭圆*/
     .item:nth-child(8) .border-radius {
         height: 45px;
         border-radius: 90px 90px 0 0 / 45px 45px 0 0;
     }
     /*饼环*/
     .item:nth-child(11) .border-radius {
         width: 40px;
         height: 40px;
         border: 70px solid deepskyblue;
         border-radius: 90px;
     }
     /*圆饼*/
     .item:nth-child(12) .border-radius {
         width: 40px;
         height: 40px;
         border: 70px solid blueviolet;
         border-radius: 60px;
     }

     /*左上角圆饼*/
     .item:nth-child(13) .border-radius {
         width: 60px;
         height: 60px;
         border: 60px solid red;
         border-radius: 90px 0 0 0;
     }

     /*对角圆饼*/
     .item:nth-child(14) .border-radius {
         width: 60px;
         height: 60px;
         border: 60px solid red;
         border-radius: 90px 0 90px 0;
     }
     /*四边不同色*/
     .item:nth-child(15) .border-radius {
         width:0px;
         height:0px;
         border-width: 90px;
         border-style: solid;

         border-color: red green yellow blue;
     }
     /*右透明色*/
     .item:nth-child(16) .border-radius {
         width: 0px;
         height: 0px;
         border-width: 90px;
         border-style: solid;
         border-color: red green yellow blue;
         border-right-color: transparent;
     }
     /*圆右透明色*/
     .item:nth-child(17) .border-radius {
         width: 0px;
         height: 0px;
         border-width: 90px;
         border-style: solid;
         border-color: red;
         border-right-color: transparent;
         border-radius: 90px;
     }
     .item:nth-child(18) .border-radius {
         width: 0px;
         height: 0px;
         border-width: 90px;
         border-style: solid;
         border-color: transparent;
         border-right-color: red;
         border-radius: 90px;
     }
     /*阴阳图前世*/
     .item:nth-child(19) .border-radius {
         width: 180px;
         height: 0px;
         border-top-width: 90px;
         border-bottom-width: 90px;
         border-style: solid;
         border-top-color: red;
         border-bottom-color: green;
         /*border-right-color: red;*/
         border-radius: 90px;
     }
     /*阴阳图前世2*/
     .item:nth-child(20) .border-radius {
         width: 180px;
         height: 90px;
         border-bottom-width: 90px;
         border-style: solid;
         border-bottom-color: green;
         background-color: red;
         /*border-right-color: red;*/
         border-radius: 90px;
     }
     /*阴阳图今生*/
     .item:nth-child(21) .border-radius {
         width: 180px;
         height: 90px;
         border-bottom-width: 90px;
         border-style: solid;
         border-bottom-color: green;
         background-color: red;
         border-radius: 90px;
         position: relative;
     }
     .item:nth-child(21) .border-radius::after,
     .item:nth-child(21) .border-radius::before {
         content: '';
         position: absolute;
         top: 50%;
         width: 20px;
         height: 20px;
         /*margin: -10px 0 0 0;*/
         border-width: 35px;
         border-style: solid;
         border-radius: 45px;
     }
     /*左阴阳*/
     .item:nth-child(21) .border-radius::after {
         background-color: red;
         border-color: green;
     }
     /*右阴阳*/
     .item:nth-child(21) .border-radius::before {
         background-color: green;
         border-color: red;
         right: 0;
     }
     /*右阴阳*/
     .item:nth-child(22) .border-radius {
         width: 180px;
         height: 90px;
         border-bottom-width: 90px;
         border-bottom-color: green;
         border-bottom-style: solid;
         background-color: red;
         border-radius: 90px;
         position: relative;
     }
     .item:nth-child(22) .border-radius::after,
     .item:nth-child(22) .border-radius::before {
         content: '';
         position: absolute;
         top: 50%;
         width: 20px;
         height: 20px;
         border-width: 35px;
         border-style: solid;
         border-radius: 45px;
     }

     .item:nth-child(22) .border-radius::before {
           border-color: green;
           background-color: red;
       }

     .item:nth-child(22) .border-radius::after {
         right: 0;
         border-color: red;
         background-color: green;
     }
     /*消息框*/
     .item:nth-child(23) .border-radius {
         width: 160px;
         height: 80px;
         background-color: red;
         border-radius: 6px;
         position: relative;
     }
     .item:nth-child(23) .border-radius::after {
         content: '';
         width: 0;
         height: 0;
         border-width: 10px;
         border-style: solid;
         border-color: transparent;
         border-right-color: red;
         position: absolute;
         top: 16px;
         left: -20px;
     }
     /*奇怪的图形*/
     .item:nth-child(24) .border-radius {
         width: 40px;
         height: 40px;
         border-width: 45px 0 45px 70px;
         border-style: solid;
         border-radius: 0 0 60px 0;
         border-color: red;
     }

     /*奇怪的图形2*/
     .item:nth-child(25) .border-radius {
         width: 100px;
         height: 40px;
         border-width: 45px 20px 45px 70px;
         border-style: solid;
         border-radius: 60px;
         border-color: red;
     }
     /*QQ对话*/
     .item:nth-child(26) .border-radius {
         width: 160px;
         height: 80px;
         background-color: pink;
         border-radius: 6px;
         position: relative;
     }

     .item:nth-child(26) .border-radius::after {
         content: '';
         position: absolute;
         top: 0;
         right: -20px;
         width: 30px;
         height: 30px;
         border-width: 0 0 30px 30px;
         border-style: solid;
         border-bottom-color: red;
         border-left-color: transparent;
         border-radius: 0 0 60px 0;
     }
     /*圆角的百分比设置 */
     .item:nth-child(27) .border-radius {
         width: 180px;
         /*height: 180px;*/
         height: 90px;
         border-radius: 50%;
         border-radius: 90px/45px;
     }

    </style>
</head>
<body>
<div class="main">
    <div class="item" data-brief="整圆">
        <div class="border-radius"></div>
    </div>
    <div class="item" data-brief="拱形">
        <div class="border-radius"></div>
    </div>
    <div class="item" data-brief="半圆">
        <div class="border-radius"></div>
    </div>
    <div class="item" data-brief="左上角">
        <div class="border-radius"></div>
    </div>
    <div class="item" data-brief="四分之一圆">
        <div class="border-radius"></div>
    </div>
    <div class="item" data-brief="横着的椭圆">
        <div class="border-radius"></div>
    </div>
    <div class="item" data-brief="竖着的椭圆">
        <div class="border-radius"></div>
    </div>
    <div class="item" data-brief="半个横着的椭圆">
        <div class="border-radius"></div>
    </div>
    <div class="item" data-brief="半个竖着的椭圆">
        <div class="border-radius"></div>
    </div>
    <div class="item" data-brief="四分之一竖着的椭圆">
        <div class="border-radius"></div>
    </div>
    <div class="item" data-brief="饼环">
        <div class="border-radius"></div>
    </div>
    <div class="item" data-brief="圆饼">
        <div class="border-radius"></div>
    </div>
    <div class="item" data-brief="左上角圆饼">
        <div class="border-radius"></div>
    </div>
    <div class="item" data-brief="对角圆饼">
        <div class="border-radius"></div>
    </div>
    <div class="item" data-brief="四边不同色">
        <div class="border-radius"></div>
    </div>
    <div class="item" data-brief="右透明色">
        <div class="border-radius"></div>
    </div>
    <div class="item" data-brief="圆右透明色">
        <div class="border-radius"></div>
    </div>
    <div class="item" data-brief="圆右红透明色">
        <div class="border-radius"></div>
    </div>
    <div class="item" data-brief="阴阳图前世">
        <div class="border-radius"></div>
    </div>
    <div class="item" data-brief="阴阳图前世2">
        <div class="border-radius"></div>
    </div>
    <div class="item" data-brief="阴阳图今生">
        <div class="border-radius"></div>
    </div>
    <div class="item" data-brief="阴阳图今生2">
        <div class="border-radius"></div>
    </div>
    <div class="item" data-brief="消息框">
        <div class="border-radius"></div>
    </div>
    <div class="item" data-brief="奇怪的图形">
        <div class="border-radius"></div>
    </div>
    <div class="item" data-brief="奇怪的图形2">
        <div class="border-radius"></div>
    </div>
    <div class="item" data-brief="QQ对话">
        <div class="border-radius"></div>
    </div>
    <div class="item" data-brief="圆角百分比">
        <div class="border-radius"></div>
    </div>
</div>
</div>
</body>
</html>
 



 



 



 



 



 



 



 



 



 



 



 



 



 



 



 



 



 



 



 



 



 



 



 



 



 



 



 



 



 



 




                

        

        

    

  


    

      

        

            

              
                
                  沐梓沐囡
                
              
            

            

                关注
              
            

        

        

          
      

      









                



	

		

			

				
					
python turtle画阴阳_Python turtle绘制阴阳太极图代码解析

				
			

			

				

					weixin_39982452的博客
				

				

					12-03
					
					705
					
				

			

		

		

			
				
本文详细分析如何使用Python turtle绘制阴阳太极图，先来分解这个图形，图片中有四种颜色，每条曲线上的箭头表示乌龟移动的方向，首先从中心画一个半圆(红线)，以红线所示圆的直径作半径画一个校园，半径为红线所示圆半径的0.15倍(蓝线)，之所以选择0.15倍，是因为这样嵌入红圆内的小圆直径和红圆直径接近黄金分割。代码导入turtle库import turtle创建画布window = turt...

			
		

	



                

              
                



	

		

			

				
					
绘制的各种图形

				
			

			

				

					杨涛的博客
				

				

					03-26
					
					164
					
				

			

		

		

			
				
一个简单的圆环：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
...

			
		

	



                


  
              

                


	

		

			

				
					
各图形的画图

				
			

			

				

					u012474716的博客
				

				

					12-06
					
					1323
					
				

			

		

		

			
				
画图

			
		

	





	

		

			

				
					
Python & Turtle练习：绘制各种图形（全部源代码）

				
			

			

				

					04-11
				

			

		

		

			
				
这是关于Python & Turtle练习：绘制各种图形（全部源代码）部分的练习，该文件中所有代码均已通过调试，且博客中均已经记录，欢迎各位朋友下载，这对于Python学习以及使用Matplotlib和Turtle绘图等是很有用的。

			
		

	



		

			
		



	

		

			

				
					
PyQt5利用QPainter绘制各种图形的实例

				
			

			

				

					09-21
				

			

		

		

			
				
此外，还可以设置画笔的线宽、颜色、风格以及画刷的风格和颜色，这些属性可以通过QPainter对象的相关方法进行设置，如`setPen()`和`setBrush()`，以改变绘制图形的外观。  5. 绘制流程：  在实际使用中，首先创建...

			
		

	





	

		

			

				
					
利用QPainter绘制各种图形

				
			

			

				

					08-24
				

			

		

		

			
				
在Qt框架中，QPainter是核心的绘图类，它提供了丰富的功能，允许开发者在窗口、图像、打印机等目标上绘制各种复杂的图形。本篇文章将深入探讨如何利用QPainter来绘制几何形状，以及相关的Qt绘图技术。  首先，...

			
		

	





	

		

			

				
					
超级详细的Python & Matplotlib绘图 绘制各种图形（源代码）

				
			

			

				

					04-11
				

			

		

		

			
				
这是 超级详细的Python & Matplotlib绘图 绘制各种图形（源代码）资源。所有内容均已经在博客中记录说明，这对于学习 Python & Matplotlib的学习会很有帮助，欢迎需要的朋友下载。

			
		

	





	

		

			

				
					
C#绘制各种图形代码.pdf

				
			

			

				

					04-04
				

			

		

		

			
				
`CountImage`类被设计用来根据统计数据生成各种统计图形，如饼状图、曲线分析图、柱形图和多组数据曲线分析图。这些图形的统一大小为600像素宽乘以420像素高。  在`GetRandomColor`方法中，代码生成了一个随机颜色。...

			
		

	





	

		

			

				
					
三维游戏引擎开发-图形理论基础

				
			

			

				

					05-16
				

			

		

		

			
				
通过学习，掌握三维图形学的基本理论，三维数学知识，并根据数理进行实践，纯软件编码方式（不调用OpenGL,DX，或者相关图形库）实现一个简单的三维场景，巩固三维理论，为后续课程打下基础。

			
		

	





	

		

			

				
					
css3 中 伪元素选择器 ：：after

				
			

			

				

					weixin_30852451的博客
				

				

					10-23
					
					103
					
				

			

		

		

			
				
利用伪元素中的 content：attr(data-brief)  ，，attr(data-brief)是 div 元素的一个属性 可以将属性为data-brief的值 显示出来

 <style>
        div{
            width: 100px;
            height: 100px;
            backgroun...

			
		

	





	

		

			

				
					
border-radius 详细用法解析（demo示例）绝大部分图形都有

				
			

			

				

					ITzhongzi的博客
				

				

					01-17
					
					1236
					
				

			

		

		

			
				
.demo1 {   /*绘制圆形*/
            width: 300px;
            height: 300px;
            border: 2px solid blue;
            margin: 50px auto;
            border-radius: 50%;
            text-align

			
		

	





	

		

			

				
					
Python turtle绘制阴阳太极图代码解析

				
			

			

				

					weixin_33725515的博客
				

				

					04-08
					
					1594
					
				

			

		

		

			
				
本文详细分析如何使用Pythonturtle绘制阴阳太极图，先来分解这个图形，图片中有四种颜色，每条曲线上的箭头表示乌龟移动的方向，首先从中心画一个半圆（红线），以红线所示圆的直径作半径画一个校园，半径为红线所示圆半径的0.15倍（蓝线），之所以选择0.15倍，是因为这样嵌入红圆内的小圆直径和红圆直径接近黄金分割。
代码
导入turtle库
import turtle
创建画布
win...

			
		

	





	

		

			

				
					
Tweetable Mathematical Art 太极阴阳图

				
			

			

				

					xshbx的专栏
				

				

					04-24
					
					3730
					
				

			

		

		

			
				
从Matrix67 blog里面看到了Tweetable Mathematical Art。
使用C++实现3个函数RD(i, j), GR(i, j), BL(i, j)分别返回像素(i, j)的R/G/B值，最终生成1幅1024*1024的图片。要求是每个函数代码不超过140字符，即Tweetable。
来个太极八卦图，娱乐一下。

			
		

	





	

		

			

				
					
校招选择题汇总【图形推理(1)】含答案解析

					
热门推荐

				
			

			

				

					Teacher_HENG
				

				

					04-13
					
					7万+
					
				

			

		

		

			
				
图形推理50中规律，自行阅读

1. 大小变化
2. 方向旋转
3. 笔画增减 ( 数字 , 线条数 )
4. 图形求同
5. 相同部份去掉
6. 图形叠加 ( 简单叠加 , 合并叠加 , 去同叠加 )
7. 图形组合变化 ( 如: 首尾两个图形中都包含中间图形 )
8. 对应位置阴影变化 ( 两图相同或不同则第三图对应位置变阴影或变空白 )
9. 顺时针或逆时针旋转
10. 总笔画成等差数列
...

			
		

	





	

		

			

				
					
python的turtle的画图经典收藏（太极图）

				
			

			

				

					易三一世
				

				

					11-02
					
					8584
					
				

			

		

		

			
				
1.效果图

2.画图次序

3.完整代码及注释说明：
from turtle import *  #从turtle中导出所有模块
radius = 100#半径为100
color("black", "black")#画线颜色黑色，填充颜色黑色
begin_fill()#开始填充
circle(radius/2, 180)#逆时针画圈，半径为50,180°
circle(radius, 180)...

			
		

	





	

		

			

				
					
使用QPainter提供的draw函数绘制各种图形

					
最新发布

				
			

			

				

					05-21
				

			

		

		

			
				
QPainter是一个Qt框架提供的绘图类，可以用来绘制各种图形，包括线条、矩形、椭圆、多边形等等。  下面是几个常见的图形的绘制方法：  1. 线条：可以使用QPainter的drawLine函数来绘制线条，例如：  ``` QPainter ...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值