css画出各种不规则图形

2023-02-21 10:02:02html-css06

css画出各种不规则图形,第1张

1、圆形

#circle{width:100pxheight:100pxbackground:red-moz-border-radius:50px-webkit-border-radius:50pxborder-radius:50px}

2、椭圆

#oval{width:200pxheight:100pxbackground:red-moz-border-radius:100px / 50px-webkit-border-radius:100px / 50pxborder-radius:100px / 50px}

3、等边三角

#triangle-up{width:0height:0border-left:50px solid transparentborder-right:50px solid transparentborder-bottom:100px solid red}

4、五角星

#star-five{margin:50px 0position:relativedisplay:blockcolor:redwidth:0pxheight:0pxborder-right:100px solid transparentborder-bottom:70px solid redborder-left:100px solid transparent-moz-transform:rotate(35deg)-webkit-transform:rotate(35deg)-ms-transform:rotate(35deg)-o-transform:rotate(35deg)}#star-five:before{border-bottom:80px solid redborder-left:30px solid transparentborder-right:30px solid transparentposition:absoluteheight:0width:0top:-45pxleft:-65pxdisplay:blockcontent:''-webkit-transform:rotate(-35deg)-moz-transform:rotate(-35deg)-ms-transform:rotate(-35deg)-o-transform:rotate(-35deg) }#star-five:after{position:absolutedisplay:blockcolor:redtop:3pxleft:-105pxwidth:0pxheight:0pxborder-right:100px solid transparentborder-bottom:70px solid redborder-left:100px solid transparent-webkit-transform:rotate(-70deg)-moz-transform:rotate(-70deg)-ms-transform:rotate(-70deg)-o-transform:rotate(-70deg)content:''}

5、爱心

#heart{position:relativewidth:100pxheight:90px}#heart:before,#heart:after{position:absolutecontent:""left:50pxtop:0width:50pxheight:80pxbackground:red-moz-border-radius:50px 50px 0 0border-radius:50px 50px 0 0-webkit-transform:rotate(-45deg)-moz-transform:rotate(-45deg)-ms-transform:rotate(-45deg)-o-transform:rotate(-45deg)transform:rotate(-45deg)-webkit-transform-origin:0 100%-moz-transform-origin:0 100%-ms-transform-origin:0 100%-o-transform-origin:0 100%transform-origin:0 100%}#heart:after{left:0-webkit-transform:rotate(45deg)-moz-transform:rotate(45deg)-ms-transform:rotate(45deg)-o-transform:rotate(45deg)transform:rotate(45deg)-webkit-transform-origin:100% 100%-moz-transform-origin:100% 100%-ms-transform-origin:100% 100%-o-transform-origin:100% 100%transform-origin:100% 100%}

6、倒三角

#triangle03{width:0height:0border:50pxsolid transparentborder-top:50pxsolid blue }

提供思路吧，步骤如下：

步骤一：画一个宽高为400px的圆，加上阴影。

步骤二：利用伪类实现左右两个半圆，一黑一白。宽为200px，高为400px

步骤三：依次画两个宽高都为200px的圆，一黑一白。上下定位。

步骤四：组后两个黑白小圆，加上，布局效果搞定。

步骤五：添加上动画效果。

码农家园

导航

用CSS绘制《我的世界》暮色森林中的遗迹石方块纹理

css

拾穗者

原文地址：https://segmentfault.com/a/1190000022984416

作者：Fw恶龙

本文首发于：思否

前言：在前端项目开发过程中有时候会遇到一些背景是通过一些规则图形进行简单变化（如：平移、旋转）得到的，通常的做法是裁剪一块可重复的图片，设置为背景图即可，随着CSS3的普及，linear-gradient和radial-gradient属性已经得到了较好的支持，通过这两个属性可以很好的模拟许多背景纹理，如：条纹、圆点、方格。于是尝试着用这两个属性来绘制一些可以替代图片的场景。在绘制过程中突然想到我的世界里的迷宫方块纹理，当时打牛头人时一直觉得这个纹理很好看（下图），于是尝试下用CSS来绘制这个纹理。

dz1.png

一、分析纹理

可以发现这个纹理的最小单元是下图，通过旋转三次可以得到一个地砖纹理。

dz4.gif

二、绘制纹理单元

dz5.jpg

如果细分的话其实可以把这个单元继续拆分一半，旋转180度也可以得到目前的最小单元，就不搞这么复杂了。目前的最小单元是8*8的单元格，先考虑绘制第一行。

由于定位图片地址有较多计算，以下用到stylus预处理器，也方便纹理颜色调整。

bp($w)

$s = ''

for i in (1..8)

if(i != 8)

$s = $s + '0' + ' ' + p2r(0.125 * (i - 1) * $w) + ','

else

$s = $s + '0' + ' ' + p2r(0.125 * (i - 1) * $w)

return unquote($s)

.item

$c1 = #738073

background-color $c1

$c2 = #747475

$w = 100px

width $w

height $w

background-image linear-gradient(90deg, $c2 37.5%, $c1 37.5%, $c1 50%, $c2 50%, $c2 62.5%, $c1 62.5%, $c1 75%, $c2 75%, $c2 87.5%, $c1 87.5%, $c1 100%)

background-size $w 0.125*$w

background-position bp($w)

background-repeat no-repeat

剩下的7行同理可得：

background-image linear-gradient(90deg, $c2 37.5%, $c1 37.5%, $c1 50%, $c2 50%, $c2 62.5%, $c1 62.5%, $c1 75%, $c2 75%, $c2 87.5%, $c1 87.5%, $c1 100%),

linear-gradient(90deg, $c2 37.5%, $c1 37.5%, $c1 50%, $c2 50%, $c2 62.5%, $c1 62.5%, $c1 75%, $c2 75%, $c2 100%),

linear-gradient(90deg, $c2 25%, $c1 25%, $c1 37.5%, $c2 37.5%, $c2 62.5%, $c1 62.5%),

linear-gradient(90deg, $c1 25%, $c2 25%, $c2 50%, $c1 50%, $c1 62.5%, $c2 62.5%),

linear-gradient(90deg, $c2 37.5%, $c1 37.5%, $c1 50%, $c2 50%, $c2 75%, $c1 75%),

linear-gradient(90deg, $c1 37.5%, $c2 37.5%, $c2 62.5%, $c1 62.5%, $c1 75%, $c2 75%),

linear-gradient(90deg, $c2 25%, $c1 25%, $c1 37.5%, $c2 37.5%, $c2 50%, $c1 50%, $c1 62.5%, $c2 62.5%, $c2 100%),

linear-gradient(90deg, $c1 12.5%, $c2 12.5%, $c2 25%, $c1 25%, $c1 37.5%, $c2 37.5%, $c2 50%, $c1 50%, $c1 62.5%, $c2 62.5%)

以上只贴了关键代码，具体代码细节可以查看

codePen

三、其他纹理，下图为iOS与安卓上的效果截图（不完全测试）

ios.png

android.jpg