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制作小旗子与小箭头的更多相关文章

  1. 利用css制作带边框的小三角

    标签(空格分隔):css 在项目中会使用到的小实例,目前知道的有两种方法来实现 设置元素的宽和高,利用rotate实现,比较简单的一种 div{ width: 10px; height: 10px; ...

  2. 用css制作空心箭头(上下左右各个方向均有)

    平常在网页中,经常会有空心箭头,除了用图片外,可以用css来实现.基本思路是,用css绘制两个三角形,通过绝对定位让两三角形不完全重叠,例如制作向右的空心箭头,位于前面的三角形border颜色是需要的 ...

  3. 用css制作一个三角形箭头

    剑走偏锋——用css制作一个三角形箭头   通常,我们做上图那个三角形,一般都是做张图,而且需要两张,因为一般都是下拉菜单的效果,需要有个hover的样式,箭头是反的.那是不是有更好的办法呢,毕竟要用 ...

  4. 用css 添加手状样式,鼠标移上去变小手,变小手

    用css 添加手状样式,鼠标移上去变小手,变小手 cursor:pointer; 用JS使鼠标变小手onmouseover(鼠标越过的时候) onmouseover="this.style. ...

  5. Animo.js :一款管理 CSS 动画的强大的小工具

    Animo.js 是一个功能强大的小工具,用于管理 CSS 动画.它的特色功能包括像堆栈动画,创建跨浏览器的模糊,设置动画完成的回调等等.Animo 还包括惊人的 animate.css,为您提供了近 ...

  6. 关于CSS中的float可能出现的小问题

    关于CSS中的float可能出现的小问题 前言:最近学习CSS的float所遇到点小问题,然后顺便分享给大家. 一.什么是CSS以及float (一) CSS概述 CSS是层叠样式表(英文全称:Cas ...

  7. 用 Python 制作一个艺术签名小工具,给自己设计一个优雅的签名

    生活中有很多场景都需要我们签字(签名),如果是一些不重要的场景,我们的签名好坏基本无所谓了,但如果是一些比较重要的场景,如果我们的签名比较差的话,就有可能给别人留下不太好的印象了,俗话说字如其人嘛,本 ...

  8. HTML+CSS实现大盒子在小盒子的展示范围内进行滚动展示

    HTML+CSS实现大盒子在小盒子的展示范围内进行滚动展示 1.效果展示: 2.主要代码:样式: overflow:auto; 3.如果想要消除对应的滚动条: .out::-webkit-scroll ...

  9. 如何用css实线所需要的小三角

    使用css实现三角符号 关于使用css制作三角符号,网上有很多的例子了,在这里只是为了详细的向各位解释一下三角符号的原理 下图,是一个长宽为100px,边框宽度为100px的一个元素,由此可见,在cs ...

随机推荐

  1. 升级cocoapods到指定版本

    把cocoapods升级到1.7.4 sudo gem install -n /usr/local/bin cocoapods -v 1.7.4

  2. 详解POI的使用方法(DOM和SAX的方式)及存在的不足

    简介 Apache POI是一套基于 OOXML 标准(Office Open XML)和 OLE2 标准来读写各种格式文件的 Java API,也就是说只要是遵循以上标准的文件,POI 都能够进行读 ...

  3. 最详细的 Spring Boot 多模块开发与排坑指南

    创建项目 创建一个 SpringBoot 项目非常的简单,简单到这里根本不用再提.你可以在使用 IDEA 新建项目时直接选择 Spring Initlalize 创建一个 Spring Boot 项目 ...

  4. MySQL:REPLACE函数的使用

    原文链接 REPLACE函数功能 REPLACE(columnName, search_str, replace_str) 查找columnName字段中所有search_str,并替换为replac ...

  5. 常用的API和基础算法

    和数学相关 1,java.lang.Math类 abs(x):求绝对值 sqrt(x):求平方根 pow(x,y):求x的y次方 ceil(x):向上取整 floor(x):向下取整 round(x) ...

  6. loadrunner-事务

    自从安装了loadrunner之后,就没怎么用过它了,项目之前也没做过性能测试,所以学习起来比较困难,而且性能测试远远不止使用工具这么简单.下面介绍一下最近学习的loadrunner添加事务. 事务是 ...

  7. 菜鸟教程-python中的包

    转载自:http://www.runoob.com/python/python-modules.html 包是一个分层次的文件目录结构,它定义了一个由模块及子包,和子包下的子包等组成的 Python ...

  8. Python字符串及基本操作(入门必看)

    基础入门的知识一直没有更新完,今天小张接着给大家带来入门级的字符串的常用操作.本文适合刚入门的小白,大佬们请绕过. 一.定义 字符串的意思就是“一串字符”,比如“Hello,Charlie”是一个字符 ...

  9. IO多路复用(IO Multiplexing)

    什么是IO多路复用 为什么要有IO多路复用 作者总结 遵循学习新知识的三部曲:是什么?为什么?怎么用? 作者前言:IO多路复用本质上是网络通信过程中的一个技术名词. 什么是IO多路复用 一个用机场管理 ...

  10. Go语言库系列之flag

    背景 终端(命令行)操作是程序员的必备技能,但是你知道怎么通过golang制作出如下命令吗? $ flag girl -h Usage of girl: -height int 身高 (default ...