在刷面试题的时候刷到2015阿里巴巴的,如何用代码实现下面的图形。

<div class="main">
<h1>图片图标-一个标签实现</h1>
<i class="icon-image"></i>
<h1>图片图标-两个标签实现</h1>
<i class="icon-image1"><i class="circle"></i></i>
<div class="footer">
&copy; dongtianee Blog:<a href="http://www.cnblogs.com/dongtianee/">一个小学生</a>
</div>
</div> <style>
.icon-image{
display: inline-block;
width: 20px;
height: 20px;
border-top:20px solid #fff;
border-right: 20px solid #fff;
border-bottom: 70px solid #fff;
border-left: 140px solid #fff;
background: #a5a5a5;
box-shadow: 0 0 0 6px #a5a5a5;
position: relative;
}
.icon-image:before{
position: absolute;
content:" ";
display: block;
border-bottom:60px solid #a5a5a5;
border-left: 40px solid transparent;
border-right: 60px solid transparent;
left:-130px;
top:20px;
}
.icon-image:after{
position: absolute;
content:" ";
display: block;
border-bottom:40px solid #a5a5a5;
border-left: 40px solid transparent;
border-right: 60px solid transparent;
left:-80px;
top:40px;
} .icon-image1{
display: inline-block;
width: 174px;
height: 104px;
background: #fff;
border: 6px solid #a5a5a5;
position: relative;
}
.icon-image1:before{
position: absolute;
content:" ";
display: block;
border-bottom:60px solid #a5a5a5;
border-left: 40px solid transparent;
border-right: 60px solid transparent;
left:10px;
bottom:10px;
}
.icon-image1:after{
position: absolute;
content:" ";
display: block;
border-bottom:40px solid #a5a5a5;
border-left: 40px solid transparent;
border-right: 60px solid transparent;
left:55px;
bottom:10px;
}
.circle{
position:absolute;
width:25px;
height: 25px;
display: block;
background: #a5a5a5;
border-radius: 50%;
top:20px;
right:20px; }
</style>

参考:http://www.cnblogs.com/dongtianee/p/4571170.html

http://www.cnblogs.com/dongtianee/p/4563084.html

更多图标:http://www.uiplayground.in/css3-icons/

如何用纯代码实现图片CSS3的更多相关文章

  1. 猫学习IOS(三)UI纯代码UI——图片浏览器

    猫分享.必须精品 看看效果 主要实现相似看新闻的一个界面,不用拖拽,纯代码手工写. 首先分析app能够非常easy知道他这里有两个UILabel一个UIImageView还有两个UIButton 定义 ...

  2. 如何用js代码实现图片切换效果

    通过点击按钮,实现图片的隐藏与显现,切换. 实现代码:<style> .a{ width: 300px; height: 300px; border: 1px solid black; } ...

  3. 纯代码利用CSS3 圆角边框和盒子阴影 制作 iphone 手机效果

    原文:纯代码利用CSS3 圆角边框和盒子阴影 制作 iphone 手机效果 大家好,我是小强老师. 今天我们看下CSS3最为简单的两个属性. css3给我们带来了很多视觉的感受和变化,以前的图片做的事 ...

  4. CSS3实战开发: 纯CSS实现图片过滤分类显示特效

    原文:CSS3实战开发: 纯CSS实现图片过滤分类显示特效 各位网友大家好,今天我要带领大家开发一个纯CSS的图片分类显示的网址导航,单纯看标题大家可能有些困惑,依照以往惯例,我先给大家演示一下实际运 ...

  5. ios手势复习值之换图片-转场动画(纯代码)

    目标:实现通过手势进行图片的切换   通过左扫右扫 来实现(纯代码) 添加三个属性 1uiImageView 用来显示图片的view 2 index 用来表示图片的索引 3 ISLeft 判断是不是向 ...

  6. AJ学IOS(03)UI之纯代码实现UI——图片查看器

    AJ分享,必须精品 先看效果 主要实现类似看新闻的一个界面,不用拖拽,纯代码手工写. 首先分析app可以很容易知道他这里有两个UILabel一个UIImageView还有两个UIButton 定义UI ...

  7. 纯代码实现CSS圆角

    我这里说的是纯代码,是指的不使用图片实现圆角,图片实现圆角,这里就不说了. 纯代码实现圆角主要有3种方法: 第一种:CSS3圆角   #chaomao{     border-radius:2px 2 ...

  8. 【C++自绘控件】如何用GDI+来显示图片

    在我们制作一个应用软件的时候往往需要在窗口或控件中添加背景图.而图片不仅有BMP格式的,还有JPEG.PNG.TIFF.GIF等其它的格式.那么如何用jpg格式的图片来当背景呢? 这里用到了GDI+, ...

  9. ios开发UI篇—使用纯代码自定义UItableviewcell实现一个简单的微博界面布局

    本文转自 :http://www.cnblogs.com/wendingding/p/3761730.html ios开发UI篇—使用纯代码自定义UItableviewcell实现一个简单的微博界面布 ...

随机推荐

  1. HTML文本域标签

    textarea文本域 cols指定列数 rows行数(不够用会自动扩容)

  2. CSS的字体样式

    CSS的字体样式 1. span标签(约定俗成:重要的东西用它括起来) 首选介绍一个约定俗成的东西:span标签.一般将想要突出的东西,比较重要的东西,用span标签括起来. 比如,”学习Java“这 ...

  3. 洛谷P1177 【模板】快速排序

    https://www.luogu.org/problem/P1177 #include<bits/stdc++.h> using namespace std; int n; multis ...

  4. Hibernate:Hibernate缓存策略详解

    一:为什么使用Hibernate缓存: Hibernate是一个持久层框架,经常访问物理数据库. 为了降低应用程序访问物理数据库的频次,从而提高应用程序的性能. 缓存内的数据是对物理数据源的复制,应用 ...

  5. 实用sql语句合集

    1. 将选取A表的name字段  然后选择A表和B表,最后进行id相等比较 最终得到的是合集 $res = \DB::select("SELECT name FROM users,car_a ...

  6. echarts修改X、 Y坐标轴字体的颜色

    1.背景:在项目中常常会用到echarts的实例,根据不同的需求字体颜色需要变化,如图,要切合背景,就需要更改字体颜色 2.解决方案 xAxis : [ { type : 'category', da ...

  7. IntelliJ IDEA 2017.3尚硅谷-----取消更新

  8. <context:component-scan>标签

    在spring-mvc的配置文件Springmvc-servlet.xml中,要扫描Controller注解的类,用<context:include-filter>标签 <conte ...

  9. PHP Apache/Nginx/IIS等各环境下的伪静态配置

    一.Apache的伪静态配置 1.网站根目录下需要有 .htaccess 文件,没有则自己创建一个,内容如下: <IfModule mod_rewrite.c> RewriteEngine ...

  10. C++如何输入单行和多行带空格的字符串并将字符串倒序输出

    首先,我们知道在C++中,空格或者回车被认为是字符串的分割标志,使用cin输入string类的字符串时遇到会自动停止接收输入 例如,当如下程序时: #include <bits/stdc++.h ...