CSS制作小旗子与小箭头
CSS制作小旗子与小箭头
效果图如下:
小旗子效果图
小箭头效果图
小旗子效果
以下是具体实现代码:
<div class="container">
<div class="flag"></div>
</div>
.container {
width: 500px;
height: 500px;
background-color: lime;
position: relative;
}
.flag {
position: absolute;
left: 150px;
top: 100px;
height: 50px;
border-width: 100px;
border-style: solid;
border-color: red red rgba(0, 0, 0, 0) red
}
以上方法的实现思路是将一个div的宽设置为0,依靠border的宽度来展现视觉效果,再通过border-color属性来将边框的其中一个角设置透明化(rgba()最后一个参数可设置透明度)
小箭头效果
以下是具体实现代码:
<div class="container">
<div class="left">
图片
</div>
<div class="right">
介绍文本
</div>
</div>
.left {
float: left;
width: 60%;
height: 100%;
background-color: mediumblue;
font-size: 50px;
font-weight: bold;
text-align: center;
}
.right {
float: right;
width: 40%;
height: 100%;
background-color: goldenrod;
font-size: 50px;
font-weight: bold;
text-align: center;
position: relative;
}
.right::after {
display: block;
content: "";
width: 0;
height: 0;
border-style: solid;
border-width: 20px;
border-color: rgba(0, 0, 0, 0) goldenrod rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
position: absolute;
left: -40px;
top: 100px;
}
实现该效果的关键同样在于border-color,相比于上一个例子,这一次是通过伪类::after使用相对定位来实现的。将四个边角中的三个设置透明(border-color参数对应位置分别为:上、右、下、左)。注意:在将其创建出来后需要向左或向右平移一段距离,平移的距离为设定的边框宽度的两倍。
CSS制作小旗子与小箭头的更多相关文章
- 利用css制作带边框的小三角
标签(空格分隔):css 在项目中会使用到的小实例,目前知道的有两种方法来实现 设置元素的宽和高,利用rotate实现,比较简单的一种 div{ width: 10px; height: 10px; ...
- 用css制作空心箭头(上下左右各个方向均有)
平常在网页中,经常会有空心箭头,除了用图片外,可以用css来实现.基本思路是,用css绘制两个三角形,通过绝对定位让两三角形不完全重叠,例如制作向右的空心箭头,位于前面的三角形border颜色是需要的 ...
- 用css制作一个三角形箭头
剑走偏锋——用css制作一个三角形箭头 通常,我们做上图那个三角形,一般都是做张图,而且需要两张,因为一般都是下拉菜单的效果,需要有个hover的样式,箭头是反的.那是不是有更好的办法呢,毕竟要用 ...
- 用css 添加手状样式,鼠标移上去变小手,变小手
用css 添加手状样式,鼠标移上去变小手,变小手 cursor:pointer; 用JS使鼠标变小手onmouseover(鼠标越过的时候) onmouseover="this.style. ...
- Animo.js :一款管理 CSS 动画的强大的小工具
Animo.js 是一个功能强大的小工具,用于管理 CSS 动画.它的特色功能包括像堆栈动画,创建跨浏览器的模糊,设置动画完成的回调等等.Animo 还包括惊人的 animate.css,为您提供了近 ...
- 关于CSS中的float可能出现的小问题
关于CSS中的float可能出现的小问题 前言:最近学习CSS的float所遇到点小问题,然后顺便分享给大家. 一.什么是CSS以及float (一) CSS概述 CSS是层叠样式表(英文全称:Cas ...
- 用 Python 制作一个艺术签名小工具,给自己设计一个优雅的签名
生活中有很多场景都需要我们签字(签名),如果是一些不重要的场景,我们的签名好坏基本无所谓了,但如果是一些比较重要的场景,如果我们的签名比较差的话,就有可能给别人留下不太好的印象了,俗话说字如其人嘛,本 ...
- HTML+CSS实现大盒子在小盒子的展示范围内进行滚动展示
HTML+CSS实现大盒子在小盒子的展示范围内进行滚动展示 1.效果展示: 2.主要代码:样式: overflow:auto; 3.如果想要消除对应的滚动条: .out::-webkit-scroll ...
- 如何用css实线所需要的小三角
使用css实现三角符号 关于使用css制作三角符号,网上有很多的例子了,在这里只是为了详细的向各位解释一下三角符号的原理 下图,是一个长宽为100px,边框宽度为100px的一个元素,由此可见,在cs ...
随机推荐
- 升级cocoapods到指定版本
把cocoapods升级到1.7.4 sudo gem install -n /usr/local/bin cocoapods -v 1.7.4
- 详解POI的使用方法(DOM和SAX的方式)及存在的不足
简介 Apache POI是一套基于 OOXML 标准(Office Open XML)和 OLE2 标准来读写各种格式文件的 Java API,也就是说只要是遵循以上标准的文件,POI 都能够进行读 ...
- 最详细的 Spring Boot 多模块开发与排坑指南
创建项目 创建一个 SpringBoot 项目非常的简单,简单到这里根本不用再提.你可以在使用 IDEA 新建项目时直接选择 Spring Initlalize 创建一个 Spring Boot 项目 ...
- MySQL:REPLACE函数的使用
原文链接 REPLACE函数功能 REPLACE(columnName, search_str, replace_str) 查找columnName字段中所有search_str,并替换为replac ...
- 常用的API和基础算法
和数学相关 1,java.lang.Math类 abs(x):求绝对值 sqrt(x):求平方根 pow(x,y):求x的y次方 ceil(x):向上取整 floor(x):向下取整 round(x) ...
- loadrunner-事务
自从安装了loadrunner之后,就没怎么用过它了,项目之前也没做过性能测试,所以学习起来比较困难,而且性能测试远远不止使用工具这么简单.下面介绍一下最近学习的loadrunner添加事务. 事务是 ...
- 菜鸟教程-python中的包
转载自:http://www.runoob.com/python/python-modules.html 包是一个分层次的文件目录结构,它定义了一个由模块及子包,和子包下的子包等组成的 Python ...
- Python字符串及基本操作(入门必看)
基础入门的知识一直没有更新完,今天小张接着给大家带来入门级的字符串的常用操作.本文适合刚入门的小白,大佬们请绕过. 一.定义 字符串的意思就是“一串字符”,比如“Hello,Charlie”是一个字符 ...
- IO多路复用(IO Multiplexing)
什么是IO多路复用 为什么要有IO多路复用 作者总结 遵循学习新知识的三部曲:是什么?为什么?怎么用? 作者前言:IO多路复用本质上是网络通信过程中的一个技术名词. 什么是IO多路复用 一个用机场管理 ...
- Go语言库系列之flag
背景 终端(命令行)操作是程序员的必备技能,但是你知道怎么通过golang制作出如下命令吗? $ flag girl -h Usage of girl: -height int 身高 (default ...