CSS3六边形
<!DOCTYPE html>
<!-- saved from url=(0043)http://dbox.whosemind.net/demo/liufang.html -->
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
<title>Document</title>
<style>
.avatar {
width: 100px;
height: 86px;
position: relative;
overflow:hidden;
} .avatar1:before {
content: "";
position: absolute;
top: 0px;
right: 0;
width: 50%;
border-bottom: 43px solid transparent;
border-left: 25px solid white;
border-right: 25px solid white;
} .avatar1:after {
content: "";
position: absolute;
bottom: 0px;
width: 50%;
right: 0; border-top: 43px solid transparent;
border-left: 25px solid white;
border-right: 25px solid white;
} .avatar img{
width: 100%;
height: 100%;
} .avatar2:before {
content: "";
position: absolute;
top: 0px;
right: 0; border-bottom: 29px solid transparent;
border-left: 50px solid white;
border-right: 50px solid white;
} .avatar2 {
height: 116px;
}
.avatar2:after {
content: "";
position: absolute;
bottom: 0px;
right: 0; border-top: 29px solid transparent;
border-left: 50px solid white;
border-right: 50px solid white;
} .avatar3{
height: 116px;
transform: rotate(120deg);
} .avatar3-inner{
overflow: hidden;
width: 100%;
height: 100%;
transform: rotate(-60deg);
} .avatar3 img{
transform: rotate(-60deg);
} .avatar4{
height: 90px;
} </style>
</head>
<body>
<div class="avatar1 avatar">
<img src="./Document_files/wallhaven-131731.jpg">
</div> <div class="avatar2 avatar">
<img src="./Document_files/wallhaven-131731.jpg">
</div> <div class="avatar3 avatar">
<div class="avatar3-inner">
<img src="./Document_files/wallhaven-131731.jpg">
</div>
</div> <div class="avatar3 avatar avatar4">
<div class="avatar3-inner">
<img src="./Document_files/wallhaven-131731.jpg">
</div>
</div>
<script> </script> </body></html>
CSS3六边形的更多相关文章
- CSS3—六边形
整理了2种方法,看完肯定觉得超简单~ 一.旋转型 话不多说先看下需要的样式: 1.transform:rotate(angle) 2.overflow 3.visibility 效果:演示效果,run ...
- CSS3 六边形绘制
把一个104px的div放在它们之间,设置一个背景颜色: width: 0; border-bottom: 30px solid #6C6; border-left: 52px solid trans ...
- CSS3 画基本图形,圆形、椭圆形、三角形等
CSS3圆角#css3-circle{ width: 150px; height: 150px; border-radius: 50%; }CSS3 椭圆形css3 radius#css3-elips ...
- CSS3 实现圆形、椭圆形、三角形等各种形状样式
CSS3 圆形 #css3-circle{ width: 150px; height: 150px; border-radius: 50%; background-color: #232323;} C ...
- CSS3绘制六边形
因为很简单,所以先总结一下:使用CSS3绘制六边形主要使用伪类:before和:after在源元素之前和之后再绘制两个元素,并利用css3的边框样式,将这两个元素变成三角形放置在源元素的两端即可. ( ...
- css3制作六边形图片
效果图: 实现原理: 这个效果的主要css样式有: 1.>transform: rotate(120deg); 图片旋转 2.>overflow:hidden; 超出隐藏 3.>v ...
- CSS3 实现六边形Div图片展示效果
原文:CSS3 实现六边形Div图片展示效果 效果图: 实现原理: 这个效果的主要css样式有: 1.>transform: rotate(120deg); 图片旋转 2.>overflo ...
- css3实现六边形
实现原理:这个效果的主要css样式有:1.>transform: rotate(120deg); 图片旋转2.>overflow:hidden; 超出隐藏3.>visibility: ...
- 第五课 Css3旋转放大属性,正六边形的绘制
---恢复内容开始--- 一.效果 二.知识点 1.background-color: rgba(0,0,0,.4); (红色.绿色.蓝色.透明度(0-1)) 2.position: absolu ...
随机推荐
- Minimum Transport Cost(floyd+二维数组记录路径)
Minimum Transport Cost Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/O ...
- [zoj 3774]Power of Fibonacci 数论(二次剩余 拓展欧几里得 等比数列求和)
Power of Fibonacci Time Limit: 5 Seconds Memory Limit: 65536 KB In mathematics, Fibonacci numbe ...
- JavaScript字符串插入、删除、替换函数
JavaScript字符串插入.删除.替换函数 说明: 以下函数中前两个函数取出查找字符串的前一部分和后一部分,以用于其他函数.注意,调用一次 replaceString(mainStr,search ...
- SQL整理4
--====================简单增删改===========--查看学生表的全部数据select * from studio --插入一个新的学生信息insert into stu ...
- CSS3 简易照片墙
代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title& ...
- C#中关于DBNULL的处理方法
从数据库中获取数据有些会是空值的,这时一不注意就会被坑了…… String.Concat(db.可能为DBNULL的值) 在这种情况下,如果是DBNULL,得到的会是""
- Oracle的用户管理,授权及备份
一.用户进行授权的操作 创建用户:刚刚创建的用户并没有任何权限 CREATE USER 用户名 indentife BY 密码 授权: GRANT 权限1,权限2... TO 用户权限有:CREAT ...
- NSThread 的用法
一.线程的注意点: 1.不要同时开太多的线程(最多不要超过5条,其中包括主线程) 2.线程概念 2.1.主线程:UI 线程,显示.刷新 UI 界面,处理 UI 控件的事件 2.2.子线程:后台线程,异 ...
- static和extern关键字 对函数的作用
本文目录 • 一.extern与函数 • 二.static与函数 • 三.static.extern与函数的总结说明:这个C语言专题,是学习iOS开发的前奏.也为了让有面向对象语言开发经验的程序员,能 ...
- css学习知识点
各个前缀所代表的浏览器: Webkit: chrome, safari[也有可能是opera] Moz: 火狐 Ms: 主要是IE O: opera border-radius: IE9 -web ...