利用css3实现不规则图像

最新推荐文章于 2024-04-25 09:46:10 发布
最新推荐文章于 2024-04-25 09:46:10 发布
阅读量761 收藏
点赞数
分类专栏： 前端
Star (6-points)
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
#star-six {
     width :  0 ;
     height :  0 ;
     border-left :  50px  solid  transparent ;
     border-right :  50px  solid  transparent ;
     border-bottom :  100px  solid  red ;
     position :  relative ;
}
#star-six:after {
     width :  0 ;
     height :  0 ;
     border-left :  50px  solid  transparent ;
     border-right :  50px  solid  transparent ;
     border-top :  100px  solid  red ;
     position :  absolute ;
     content :  "" ;
     top :  30px ;
     left :  -50px ;
}

　　

Star (5-points)
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
#star-five {
    margin :  50px  0 ;
    position :  relative ;
    display :  block ;
    color :  red ;
    width :  0px ;
    height :  0px ;
    border-right :   100px  solid  transparent ;
    border-bottom :  70px   solid  red ;
    border-left :    100px  solid  transparent ;
    -moz-transform:    rotate( 35 deg);
    -webkit-transform: rotate( 35 deg);
    -ms-transform:     rotate( 35 deg);
    -o-transform:      rotate( 35 deg);
}
#star-five:before {
    border-bottom :  80px  solid  red ;
    border-left :  30px  solid  transparent ;
    border-right :  30px  solid  transparent ;
    position :  absolute ;
    height :  0 ;
    width :  0 ;
    top :  -45px ;
    left :  -65px ;
    display :  block ;
    content :  '' ;
    -webkit-transform: rotate( -35 deg);
    -moz-transform:    rotate( -35 deg);
    -ms-transform:     rotate( -35 deg);
    -o-transform:      rotate( -35 deg);
 
}
#star-five:after {
    position :  absolute ;
    display :  block ;
    color :  red ;
    top :  3px ;
    left :  -105px ;
    width :  0px ;
    height :  0px ;
    border-right :  100px  solid  transparent ;
    border-bottom :  70px  solid  red ;
    border-left :  100px  solid  transparent ;
    -webkit-transform: rotate( -70 deg);
    -moz-transform:    rotate( -70 deg);
    -ms-transform:     rotate( -70 deg);
    -o-transform:      rotate( -70 deg);
    content :  '' ;
}

　　

Pentagon

 

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
#pentagon {
     position :  relative ;
     width :  54px ;
     border-width :  50px  18px  0 ;
     border-style :  solid ;
     border-color :  red  transparent ;
}
#pentagon:before {
     content :  "" ;
     position :  absolute ;
     height :  0 ;
     width :  0 ;
     top :  -85px ;
     left :  -18px ;
     border-width :  0  45px  35px ;
     border-style :  solid ;
     border-color :  transparent  transparent  red ;
}

　　

Hexagon

 

 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
#hexagon {
     width :  100px ;
     height :  55px ;
     background :  red ;
     position :  relative ;
}
#hexagon:before {
     content :  "" ;
     position :  absolute ;
     top :  -25px ;
     left :  0 ;
     width :  0 ;
     height :  0 ;
     border-left :  50px  solid  transparent ;
     border-right :  50px  solid  transparent ;
     border-bottom :  25px  solid  red ;
}
#hexagon:after {
     content :  "" ;
     position :  absolute ;
     bottom :  -25px ;
     left :  0 ;
     width :  0 ;
     height :  0 ;
     border-left :  50px  solid  transparent ;
     border-right :  50px  solid  transparent ;
     border-top :  25px  solid  red ;
}

　　

Octagon
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
#octagon {
     width :  100px ;
     height :  100px ;
     background :  red ;
     position :  relative ;
}
 
#octagon:before {
     content :  "" ;
     position :  absolute ;
     top :  0 ;
     left :  0 ;
     border-bottom :  29px  solid  red ;
     border-left :  29px  solid  #eee ;
     border-right :  29px  solid  #eee ;
     width :  42px ;
     height :  0 ;
}
 
#octagon:after {
     content :  "" ;
     position :  absolute ;
     bottom :  0 ;
     left :  0 ;
     border-top :  29px  solid  red ;
     border-left :  29px  solid  #eee ;
     border-right :  29px  solid  #eee ;
     width :  42px ;
     height :  0 ;
}

　　

Heart
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
#heart {
     position :  relative ;
     width :  100px ;
     height :  90px ;
}
#heart:before,
#heart:after {
     position :  absolute ;
     content :  "" ;
     left :  50px ;
     top :  0 ;
     width :  50px ;
     height :  80px ;
     background :  red ;
     -moz-border-radius:  50px  50px  0  0 ;
     border-radius:  50px  50px  0  0 ;
     -webkit-transform: rotate( -45 deg);
        -moz-transform: rotate( -45 deg);
         -ms-transform: rotate( -45 deg);
          -o-transform: rotate( -45 deg);
             transform: rotate( -45 deg);
     -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( 45 deg);
        -moz-transform: rotate( 45 deg);
         -ms-transform: rotate( 45 deg);
          -o-transform: rotate( 45 deg);
             transform: rotate( 45 deg);
     -webkit-transform-origin:  100%  100% ;
        -moz-transform-origin:  100%  100% ;
         -ms-transform-origin:  100%  100% ;
          -o-transform-origin:  100%  100% ;
             transform-origin : 100%  100% ;
}

dension_lee
关注
专栏目录
使用CSS 3创建不规则图形
11-13 444
前言 CSS 创建复杂图形的技术即将会被广泛支持，并且应用到实际项目中。本篇文章的目的是为大家开启它的冰山一角。我希望这篇文章能让你对不规则图形有一个初步的了解。 现在，我们已经可以使用CSS 3 常见不规则复杂图形了（点击链接查看），如下图所示： 使用CSS创建的图形，无法内置文字或实现文字环绕效果。因此，如何实现不规则图形和文字复杂布局也成为了一个热议话题。 今天我们就来...
css3创建多边形clip属性，可用来绘制不规则图形了
weixin_30951389的博客
10-21 217
.path1 { clip-path: polygon(5px 10px, 16px 3px, 16px 17px); } .path2 { clip-path: polygon(3px 5px, 17px 5px, 10px 16px); } .path3 { clip-path: polygon(5px 10px, 16px 3px, 16px 10px,...
不规则形状 前端_css3创建多边形clip属性，可用来绘制不规则图形了
weixin_35995377的博客
12-24 376
.path1 {clip-path: polygon(5px 10px, 16px 3px, 16px 17px);}.path2 {clip-path: polygon(3px 5px, 17px 5px, 10px 16px);}.path3 {clip-path: polygon(5px 10px, 16px 3px, 16px 10px, 26px 10px, 26px 3px, 37px...
html 绘制不规则图形,css3创建多边形clip属性，可用来绘制不规则图形了
weixin_39789399的博客
06-09 227
.path1 {clip-path: polygon(5px 10px, 16px 3px, 16px 17px);}.path2 {clip-path: polygon(3px 5px, 17px 5px, 10px 16px);}.path3 {clip-path: polygon(5px 10px, 16px 3px, 16px 10px, 26px 10px, 26px 3px, 37px...
CSS3实现不规则排列lightbox效果
06-12
本示例“CSS3实现不规则排列lightbox效果”就是一个典型的利用CSS3特性来创建独特用户体验的例子。在这个项目中，我们将深入探讨如何使用CSS3来实现这种效果，同时也会涉及到HTML5的基础应用。 首先，让我们了解...
CSS3不规则瀑布流布局特效
04-02
CSS3不规则瀑布流布局特效则在此基础上进一步创新，通过引入倾角和滤镜效果，为网页增添了更丰富的视觉体验。 首先，我们来详细了解一下CSS3中的关键知识点： 1. **Flexbox（弹性盒布局）**：虽然瀑布流布局早期多...
纯css实现3D图像轮转效果
09-24
实现纯CSS的3D图像轮转效果不仅需要掌握基础的HTML和CSS知识，还需要对CSS3中的变换和动画有深入的理解。通过对元素的3D变换和关键帧动画的应用，可以创造出类似于2D图像轮播的动态效果，同时呈现出3D立体的视觉体验...
css不规则图形实现原理及代码
12-13
本文将深入探讨CSS不规则图形的实现原理，以及如何通过代码实现这些效果。 首先，让我们来看看标题和描述中提到的关键知识点——边框（border）原理。在CSS中，每个元素都有四个边框：上（top）、右（right）、下...
css 不规则边角_CSS实现各种形状
weixin_39595310的博客
12-22 1271
CSS3的一个非常酷的特性是允许我们创建各种规则和不规则形状的图形，从而可以减少图片的使用。以前只能在Photoshop等图像编辑软件中制作的复杂图形现在使用CSS3就可以完成了。通过使用新的CSS属性，像transform和border-radius，我们可以创建非常漂亮和复杂的图形效果。圆形要使用CSS来制作一个圆形，我们需要一个div，被给它设置一个ID。圆形在设置CSS时要设置宽度和高度相...
CSS3绘制不规则图形的一些方法示例
12-04
前言 CSS 创建复杂图形的技术即将会被广泛支持，并且应用到实际项目中。本篇文章的目的是为大家开启它的冰山一角。我希望这篇文章能让你对不规则图形有一个初步的了解。 现在，我们已经可以使用CSS 3 常见不规则复杂图形了，如下图所示： 使用CSS创建的图形，无法内置文字或实现文字环绕效果。因此，如何实现不规则图形和文字复杂布局也成为了一个热议话题。 今天我们就来介绍一下如何实现这个效果。文章中我们将阐述如何使用 CSS创建不规则图形，实现不规则的文本布局。学会如何创建不规则图形之后，你就可以发挥想象力，创建唯美的CSS页面了，下图既是使用该技术创建的《爱丽丝梦游仙境》效果图： 注：这是CSS的最
uniapp-css:拼图（不规则图片拼插）、碎片
最新发布
努力、拼搏、奋进
04-25 602
uniapp-css:拼图（不规则图片拼插）、碎片
css3 不规则阴影
Khun_HWJ的博客
08-13 855
错误方案 —— 利用box-shadow 在面对规则的矩形或者圆形，用box-shadow生成的投影可以说堪称完美。 但是面对不规则图形，再用box-shadow生成的投影就有点力不从心了。 可以看出，这时圆角矩形的投影打到三角形上面了。在某些情况下看起来可能会有点不那么和谐。 正确的方案 —— filter 这里利用伪元素生成小三角形。 <div>Rabbit</div&...
CSS 之 图片九宫格变幻效果
weixin_45092437的博客
01-27 1571
本篇博客用于讲解如何实现图片九宫格变幻的样式效果，将图片分为九块填充在3×3的的九宫格子元素中，并结合`grid`、`hover`、`transition`等CSS属性，实现元素`hover`时，九宫格子元素合并为一张完整图片的动画效果。为了简化代码，demo中通过JS设置CSS变量的方法，优化了元素背景的设置过程，减少了代码的繁杂度。最后还结合js的点击事件实现了一个简易的点击拼图demo。
css | 不规则 的图片 clip-path
微也的博客
12-22 2351
“我就係風魔萬千前端開發，改造web風氣，刺激圖片市場，提高代碼內涵，玉樹臨風，風度翩翩的css專家之一，我個名叫剪切路徑，英文名叫clip-path”。 ——题记，改编源自《整蛊专家》 正文 话说我们上回讲道：如何利用css实现多边形，综之原理便是利用width、height为0，结合border，一个纯多边形在代码下诞生了。那么，图片呢，我突然想让图片也显示的不规则，咋弄。今
CSS定义不规则图片排版
weixin_30814319的博客
11-10 1196
实现效果如下： http://yxkt.web-179.com/test/test11.html html代码: <table class="" width="950" border="1" cellpadding="0" cellspacing="0" height="590"> <tbody> <tr> ...
css3使用clip-path裁剪元素
帆酱的博客
12-01 1195
简介 clip-pathCSS 属性可以创建一个只有元素的部分区域可以显示的剪切区域。区域内的部分显示，区域外的隐藏。剪切区域是被引用内嵌的URL定义的路径或者外部svg的路径，或者作为一个形状。clip-path属性代替了现在已经弃用的剪切clip属性。 基本语法 clip-source|basic-shape|geometry-box|none 一、 ...
使用CSS3实现Google涂鸦动画教程
虽然IE浏览器不完全支持CSS3动画，但仍然鼓励开发者学习并运用CSS3。文章通过示例代码详细解释了如何构建一个简单的骑手和马匹运动的动画场景。" 在创建Google涂鸦动画时，HTML5和CSS3的结合使用能够带来流畅且无需...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值