15年软件开发经验 只做源码定制 互联网+定制化解决方案

15年软件开发经验,只做源码定制!

原创设计 定制开发

满足您的个性化需求

当前位置:首页 前端开发 vue/vuex

使用css属性来绘制特殊图案

李家霖| 发布于 2021-07-06 22:24:34| 536阅读| 0点赞| 0评论
举报

利用了css的border-radio来绘制一个圆弧、圆环与扇形

border-radio 可以控制一个元素的四个角如何切圆  接收四个值 分别设置 左上 右上 右下 左下

代码:

		.box{
                 width: 150px;
			height: 150px;
			background-color: rgb(0, 0, 0);
			border-radius:10px 20px 30px 40px;
		}

效果:

data:image/png;base64,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


通过控制四个角的切角弧度可以创造出一个扇形

代码:

		.box{
                       width: 150px;
			height: 150px;
			background-color: rgb(0, 0, 0);
			border-radius:150px 0px 0px 0px;
		}

效果:

data:image/png;base64,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


border边框也是在且圆范围之内的 所以设置一个border 然后在将背景颜色设置成透明即可的到一个圆弧

代码:

		.box{
                        width: 150px;
			height: 150px;
			border: 10px solid;
			border-right:none ;
			border-bottom: none;
			background-color: rgba(0, 0, 0, 0);
			border-radius:160px 0px 0px 0px;
		}

效果:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQEAAADeCAYAAAA987WzAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAEnQAABJ0Ad5mH3gAAA8xSURBVHhe7d1PSFX5/8fxkYQszEVCLRymFoJIaFjQRH/AhUWBLmSQHEoSUZFwISI15CI0dDFt3BS5aOFCDAxnYIxaCIGBwkilLgrlS5i4kMhFYSg49vn9Pnc+X77z/fI+5557zzn3fs49zwe8l5/TzOL1Uu/9nM/nu+V/rSiGYeI73ykAsUYJADFHCQAxRwkAMUcJADFHCQAxRwkAMUcJADFHCQAxRwkAMUcJIJa+fPmilpeX1cuXL9XExIQaHh5Wg4ODqqenR7W2tqqGhgZ18eJFdebMGVVZWalKS0tVSUmJKi4uVgcOHFAFBQUqPz9f5eXlqe++i3aMKAHkpLW1NTU9Pa1GRkZUX1+famlpURcuXFDl5eWqqKgoEdwgJ8ooAUTW7u6uWlhYUGNjY+rOnTvqypUrqqqqShUWFopBDXOijBJAJGxsbKipqSl17949de3atcSv6P/+VdyGiTJKAFaanZ1VQ0ND6urVq6qsrEwMnk0TZZQAsm5zc1M9e/ZM9fb2qurqarV3714xaDZPlFECyLhv374lfrXXoT979qwYqqhNlFECyIi3b98mfr2vra1NfL0mBSnKE2WUAEKjf9p3d3cnvpaTgpNLE2WUAAKjv7LTG2+am5sTm2qksOTqRBklAN+ePHmS+BR///79YkDiMFFGCSAtz58/T+zCC2P3XRQnyigBeDY/P69u3bqljhw5IgYhanP48GF1/PjxxDsCegNSV1eXunv3rrp//74aHR1Vk5OTia3Hr1+/VktLS2p1dVV9/PhRff78WW1tbamdnZ3En0BRRwnA1devX9XDhw/VuXPnxCDZPEePHlU1NTWqra0t8XKQDrZ+YWhlZSURYPyNEoBoZmZGtbe3R+LrvIqKCtXY2Kj6+/vV+Pi4WlxcVNvb2+b/BMlQAvgvjx49snYDj95JqF/t7ezsTPx3vnr1ip/oAaAEoD58+JDYvXfo0CExfNka/Q5/U1NT4m/0ubk581+LoFECMaZf0rl+/boYwGzMsWPH1I0bNxKvBusP4ZAZlEAM6U+9L1++LAYxk6NP6tElpA/+IPTZQwnEiP4Jq/+mlgKZqTl//rwaGBjg13uLUAIxoH/S6hN3pFCGPfocvvr6+sQHeevr6+a/CDahBHKYDr8+gUcKZ5ijP8XXX9k9fvw4sakGdqMEcpD+tf/EiRNiQMMc/RNfb8jhO/pooQRyiP7AL9M7+/Tf+PorvE+fPpn/CkQNJZAD9Fd9dXV1YkjDGP2pvn6HQO/MQ/RRAhGmN/noizKkoIYx+lQgvS0XuYUSiCh9ocaePXvEsAY5+nCQmzdvqnfv3pl/GbmGEogY/cGb3k4rBTbIOXnyZOJqrlx4VRbuKIGIePPmTeLXcSmwQY7+bOHp06fmX0UcUAIRcPv2bTGwQY4+F5BdfPFECVhMH9oZ9u07+rVcfTsv4osSsJDeXhv22336KHBe2oFGCVhG77E/ePCgGNwgRp+jp6/tBv6NErCE/qnc0NAgBjeI6ejoUO/fvzf/GvAflIAF9E//sI7u/vnnn9nZB1eUQBbp/fb60g4pvH5Hn7L74sUL8y8BziiBLNGf/Os9+FKA/Yz+NkFvKAK8ogSyQH8yLwXYz+jDO/SJPUCqKIEM0rv+Tp8+LYbYz+gTefWFGkA6KIEM0fvw8/LyxBCnO/oKLX2GAOAHJZAB+iYfKcR+Rt+2AwSBEgjRwsKCOnXqlBjidEcfFc5XfggSJRAS/Ql9kPf47du3L3GMFxA0SiAE+kovKcjpjj7Ak91+CAslEKDNzU31008/iUFOZ/TR3Q8ePDBPB8JBCQRkfn4+0DP+L126pJaWlszTgfBQAgH47bffVGFhoRjmdGZwcNA8GQgfJeDT0NCQGOR0pqKiQk1PT5snA5lBCfjQ09Mjhjmd0UeH7+zsmCcDmUMJpCnIt//0bkIgWyiBFG1sbCRe05XCnOrom4I53BPZRgmkQB/IqffrS4FOdfQZgvz6DxtQAh79+eef6ocffhADner8+uuv5qlA9lECHkxNTQVy/Je+0uuPP/4wTwXsQAkk8fvvvwfyCvCPP/7I5h9YiRJwMTY2JgY61dGHff7111/mqYBdKAEHIyMjYqBTnV9++cU8EbATJSDQR4BLgU51ePUXUUAJ/I8grv/Sb//p9wmAKKAE/iGI3wC+//57NTMzY54I2I8SMIL4DEBvJOKGX0QNJfD/gvgWoLq6OnGjEBA1sS8BvQ9ACnUqU1dXxxZgRFasS0DvBPS7EaixsdE8DYim2JaAfhfA71bg5uZm8zQgumJZAvrDO78vA7W1tZmnAdEWuxLQ5wH4fR24o6PDPA2IvtiVgN8DQSgA5JpYlYDfI8H4EwC5KDYl4PdQUD4ERK6KRQn4PRacrwGRy3K+BPSLPFKwvY7eCATkspwuAX01mJ+bgfRWYHYCItflbAnoy0H93A2ov0bkXQDEQc6WgJ/bgfXrwLwNiLjIyRLo7e0Vw+1l9IEgnAeAOMm5EhgdHRXD7XU4EQhxk1MlsLCwoAoKCsRwexnOBEQc5VQJnDp1Sgy3l+FUYMRVzpRAe3u7GG4vo+8FAOIqJ0pAX+0thdvL6JuBuBgEcRb5Enjz5k3apwPpuwG5GgxxF/kSOH36tBhwL8PloEDES6C7u1sMt5fhenDgb5EtgYmJCTHcXkbfMgTgb5EsAb2nv6SkRAx4sqmqquKlIOAfIlkCfk4ImpubM08BoEWuBPzcF6i/SgTw3yJVAqurq2nfFdDa2mqeAuCfIlUCDQ0NYsCTTUVFBZ8DAA4iUwJ+/gyYnp42TwHwvyJRAuvr6+rgwYNiwJPN4OCgeQoASSRKQH+vLwU82Vy6dMk8AYAT60sg3U1B+oQg3gsAkrO+BMrKysSQJ5sHDx6YJwBwY3UJ3L59Wwx4sqmvrzdPAJCMtSWgXxGWAp5s9u3bp96/f2+eAiAZa0ugtrZWDHmy4ZxAIDVWlkC6JwZfvnzZPAGAV1aWQGlpqRjyZLO4uGieAMAr60qgr69PDHiy6e/vN08AkAqrSuDDhw9qz549YsjdRt8bCCA9VpWAftNPCnmymZycNE8AkCprSmB2dlYMeLJpamoyTwCQDmtKoK6uTgy52+Tn56uVlRXzBADpsKIE9K/zUsiTzcDAgHkCgHRZUQLnzp0TQ+42+p0CAP5lvQTGxsbEkCcbvaEIgH9ZL4ETJ06IIXebmpoasxqAX1ktgZGRETHkyebFixfmCQD8ymoJVFZWiiF3G64RB4KVtRJI97cA3g8AgpW1EtDXgUkhd5uOjg6zGkBQslIC6X4jwGEhQPCyUgJnzpwRQ+42XV1dZjWAIGW8BNLdHbi2tmaeACBIGS8BffqPFHK36e7uNqsBBC2jJZDum4L6IlIA4choCaRzk1BnZ6dZDSAMGSsBfWqQFPJks7y8bJ4AIAwZK4He3l4x5G7T3NxsVgMIS8ZK4NChQ2LQ3WZubs6sBhCWjJTAo0ePxJC7jT5pCED4MlICZ8+eFYPuNk+fPjWrAYQp9BKYmZkRQ+42J0+eNKsBhC30EmhvbxeD7jbDw8NmNYCwhVoCX79+VQUFBWLQnaa4uFjt7u6aJwAIW6gl8PDhQzHobnPz5k2zGkAmhFoC6Zwi/O7dO7MaQCaEVgLz8/NiyN2mtrbWrAaQKaGVwK1bt8Sgu834+LhZDSBTQiuBI0eOiEF3mpKSErMSQCaFUgLPnz8Xg+42+jcHAJkXSgm0tLSIQXcbThEGsiOUEigqKhKD7jTnz583KwFkWuAl8OTJEzHobnP//n2zGkCmBV4CV69eFYPuNp8+fTKrAWRaoCWgt/vu379fDLrT1NfXm9UAsiHQEpiYmBCD7jZcMQ5kV6AloI8Dk4LuNHv37lXb29tmNYBsCLQE9BuAUtidprGx0awEkC2BlcDU1JQYdLd5/PixWQ0gWwIrAX1LkBR0p8nPz1dbW1tmNYBsCawEysvLxbA7Dd8KAHYIpATevn0rBt1t9AnEALIvkBIYGhoSg+426+vrZjWAbAqkBPRhIFLQnYZ3BQB7+C6Bb9++pXyY6MDAgFkNINt8l0A6Xw1yvRhgD98lkOpFo5wgBNjFdwmkesXY9evXzUoANvBVApubm2LQ3WZkZMSsBmADXyXw7NkzMehus7q6alYDsIGvEkj184Bjx46ZlQBs4asEqqurxbA7zY0bN8xKALbwVQL6PAAp7E4zNjZmVgKwRdolMDs7Kwbdbfg8ALBP2iWQ6vsCpaWlZiUAm6RdAqmeKtzU1GRWArBJ2iVQVlYmht1puFsAsFNaJbCxsSEG3W14XwCwU1olkOpLQ/pbBAB2SqsE7t27J4bdac6cOWNWArBNWiVw7do1MexO09nZaVYCsE1aJVBZWSmG3Wk4TxCwV8oloO8bzMvLE8PuNK9evTKrAdgm5RJYWFgQg+42Ozs7ZjUA26RcAnr/vxR0p6moqDArAdgo5RK4c+eOGHan4b5BwG4pl8CVK1fEsDtNf3+/WQnARimXQFVVlRh2pxkfHzcrAdgo5RIoLCwUw+40i4uLZiUAG6VUAmtra2LQ3WZ7e9usBmCjlEpgenpaDLrTHD161KwEYKuUSkAfFy6F3WlqamrMSgC2SqkE+vr6xLA7TVtbm1kJwFYplUBLS4sYdqcZHBw0KwHYKqUSuHDhghh2pxkdHTUrAdgqpRIoLy8Xw+40L1++NCsB2CqlEigqKhLD7jQrKytmJQBbeS6BL1++iEF3G94eBOznuQSWl5fFoDvN4cOHzUoANvNcAvrveynsTnP8+HGzEoDNPJfAxMSEGHanuXjxolkJwGaeS2B4eFgMu9Pow0gB2M9zCeiNP1LYnaarq8usBGAzzyXQ09Mjht1p7t69a1YCsJnnEmhtbRXD7jTcPQhEg+cSaGhoEMPuNGwZBqLBcwnoT/ulsDvN5OSkWQnAZp5LQN8nKIXdafQBJADs57kEUr167PXr12YlAJt5LoHS0lIx7E6ztLRkVgKwmecSKCkpEcPuNKurq2YlAJt5LoHi4mIx7E7z8eNHsxKAzTyXwIEDB8SwO83nz5/NSgA281wCBQUFYtidZmtry6wEYDPPJZCfny+G3Wk4UASIBs8lkJeXJ4bdaXZ3d81KADbzXAJS0N0GQDSQViDmKAEg5igBIOYoASDmKAEg5igBIOYoASDmKAEg5igBIOYoASDmKAEg1pT6P/frFf/X2buqAAAAAElFTkSuQmCC

设置成圆环

代码:

		.box{
                        width: 150px;
			height: 150px;
			border: 10px solid;
			background-color: rgba(0, 0, 0, 0);
			border-radius:50%;
		}

效果:

data:image/png;base64,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


0

0条评论

别默默看啦~登录/注册一起参与讨论吧~

热门标签

李家霖
微信扫一扫立即咨询
账号登录|扫码登录

立即注册 |忘记密码?

欢迎注册

已有账号马上登录

重置密码

扫码绑定微信
微信扫一扫

绑定手机号

分享到-微信

举报

  • 举报类型:

  • 举报描述:

您好,当前积分不足。

在线客服
拨打电话
17330196230 13230981129
顶部