网页中三角切边还半透明,现在的设计师越来越牛,css也要跟上啊
需求
今天在群里看到一个需求,啊这种三角形缺角怎么做啊,还带半透明阴影的。
分析
要实现这个,可以用css做三角,网上找一下代码,像这样。
由于以前没有试过border能不能带透明,所以需要试验一下。
那么去试验下,red能不能用rgba去替换,如果可以的话那就成功一半了。
简单试验下,居然可以。
.sanjiao
{
position: relative;
width: 0;
height: 0;
border-bottom: 100px solid rgba(0,0,0,.5);
border-left: 100px solid transparent;
}
那么接下来就是在阴影的三角里插入一个白色的略小一点的三角就可以了。
实现
<div style="background: url(http://uploads.xuexila.com/allimg/1608/704-160P9224Z4.jpg);
width: 900px; height: 300px; padding-top: 20px;" class="bg">
<div class="sanjiao">
<div class="sanjiaobai">
</div>
</div>
</div>
<style>
.sanjiao
{
position: relative;
width: 0;
height: 0;
border-bottom: 100px solid rgba(0,0,0,.5);
border-left: 100px solid transparent;
}
.sanjiaobai
{
position: absolute;
right: 0;
top: 20px;
width: 0;
height: 0;
border-bottom: 80px solid #fff;
border-left: 80px solid transparent;
}
</style>
至此就完成了这个缺角还带阴影的div了,至于右侧填充一个白色的div,还有下面正常矩形div就不再这里实现了。
网页中三角切边还半透明,现在的设计师越来越牛,css也要跟上啊的更多相关文章
- 使用jquery获取网页中图片的高度——解惑
jQuery获取网页中图片的高度 使用jquery获取网页中图片的高度其实很简单,有两种常用的方法都可以打到我们的目的 $("img").whith();(返回纯数字) $(&qu ...
- CSS在网页中应用的方式_嵌入式
内联式样式表:直接写在现有的标记中,比如: 复制代码 代码如下: <p style="font-size:24px;">www.phpstudy.net</p&g ...
- CAD在网页中绘图,并为新绘的对象写扩展数据和读取扩展数据
在网页中绘图,并为新绘的对象写扩展数据和读取扩展数据.下面帮助的完整例子,在控件安装目录的 Sample\Ie\iedemo.htm 中. 主要用到函数说明: _DMxDrawX::InsertBlo ...
- 【学】CSS3基础实例1 - 用CSS3做网页中的小三角,以及transition的用法
自开了博客园已经有2周了吧,虽然转载了一些觉得比较有用的文章之外还没有开始写自己的一些学习记录,那就从今天开始. 目前看了妙味的不少视频,有css+html,js的基础和中级也都看完了,作业也都做了, ...
- 如何在网页中提取Email地址
开博好久了,今天第一次发表技术文档,之前总是将一些好的事例保存在电脑,时间久了找起来也很麻烦,所以还是放在博客里进行归类比较方便,这样也能将自己在学习过程中的一些心得体会分享给大家,也能给需要的人一点 ...
- Java 抓取网页中的内容【持续更新】
背景:前几天复习Java的时候看到URL类,当时就想写个小程序试试,迫于考试没有动手,今天写了下,感觉还不错 内容1. 抓取网页中的URL 知识点:Java URL+ 正则表达式 import jav ...
- 网页中多媒体对像标记<OBJECT>和<EMBED>
在网页中常用object和embed标记插入的多媒体对象,比如FLASH,视频等. 用一个快播例子说明下这两个标记的使用和区别: <object classid="clsid:F3D0 ...
- 如何在网页中调用百度地图api
我想在木有提供地图接口的年代,前端工程师门要么只写上企业的具体地址,要么就是用一张标有自己位置的地图图片.但是现在不一样啦!为了增强用户体验,谷歌,甚至百度都很开放了,你可以在他们的网站上找到地图接口 ...
- 使用CKplayer插件在网页中嵌入视频的方法(常用笔记2)
在做网站中有时候我们需要在网页中嵌入视频,一般视频嵌入有以下几种方法: 1. 优酷代码嵌入 优点:简单,方便,可靠. 缺点:有广告,现在的网站非常注重用户体验,如果打开一个在线视频是有长广告的一定会崩 ...
随机推荐
- 服务器磁盘扩展卷时遭遇“There is not enough space available on the disk(s) to complete this operation.”错误
在ESX VM的一台服务器由于磁盘空间告警,打算决定给E盘扩展空间,增加20G的空间,在操作过程遭遇了Expanding Disk Volume gives error "There is ...
- const,readonly 这些你真的懂吗? 也许会被面试到哦。。。
首先不可否认,这些在面试上会经常被面试官问起,但是你回答的让面试官满意吗?当然如果你知道了这些原理,或许你就不 怕了.既然说到了原理,我们还是从MSDN说起. 一:值得推敲的几个地方 1.先来看看ms ...
- SharePoint Content Database简介
SharePoint作为微软主打的企业Portal平台,功能强大,使用简单,非常的方便.对于很多关系数据,我们可以使用自定义列表来维护,如果是非关系数据,可以使用文档库来维护.另外还可以在上面进行版本 ...
- 编写Java应用程序。首先,定义一个时钟类——Clock,它包括三个int型 成员变量分别表示时、分、秒,一个构造方法用于对三个成员变量(时、分、秒) 进行初始化,还有一个成员方法show()用于显示时钟对象的时间。其次,再定义 一个主类——TestClass,在主类的main方法中创建多个时钟类的对象,使用这 些对象调用方法show()来显示时钟的时间。
package com.hanqi.test; public class Clock { int hh; int mm; int ss; String time; Clock(int h,int m, ...
- 注解学习(模仿springMvc的注解注入方式)
最近在看springMvc的源码,看到了该框架的注入注解的部分觉的有点吃力,可能还是对注解的方面的知识还认识的不够深刻,所以特意去学习注解方面的知识.由于本人也是抱着学习的态度来阅读源码,若文章在表述 ...
- linux学习之路——ubuntu 16.04 开机开启数字小键盘解决方法
第一步:安装numlockx,输入命令 sudo apt-get install numlockx 第二步:用 vim 打开 rc.local 文件,输入命令 sudo vim /etc/rc.loc ...
- 基于Qt5.5.0的sql数据库、SDK_tts文本语音朗读的CET四六级单词背诵系统软件的编写V1.0
作者:小波 QQ:463431476 请关注我的博客园:http://www.cnblogs.com/xiaobo-Linux/ 我的第二款软件:CET四六级单词背诵软件.基于QT5.5.0.sql数 ...
- C++ 中 typename
声明template参数时, 前缀关键字class和typename可以互换; 使用关键字typename标识嵌套从属类型名称, 但不需在基类列表和成员初始化列表内使用. 从属名称(dependent ...
- 理解 Linux 网络栈(2):非虚拟化Linux 环境中的 Segmentation Offloading 技术
本系列文章总结 Linux 网络栈,包括: (1)Linux 网络协议栈总结 (2)非虚拟化Linux环境中的网络分段卸载技术 GSO/TSO/UFO/LRO/GRO (3)QEMU/KVM + Vx ...
- 广州APP开发外包公司哪家比较好?广州达到信息技术有限公司技术到底怎么样?
广州APP开发公司哪家比较好,广州手机APP软件开发公司广州达到信息表示:用户的刚性需求是公司使用手机APP软件盈利的根本前提和基础,所以开发一款手机APP应用时必须从客户的角度来思考.因此公 ...