html5 css写出一个实心三角形和空心三角行
原理:css中的border属性的特殊性。
实心三角形:
html5:
<div id="mydiv"></div>
css:
#mydiv{
height: 0px;
width: 0px;
z-index: 1;/*这个与后面的空心三角形有关*/
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
}
空心三角形:
只需要在原有的实心三角形的样式上加上:
#mydiv:after{
content: '';
z-index: 99;
position: absolute;
top: 9px;
left: 10px;
border-left: 48px solid transparent;
border-right: 48px solid transparent;
border-bottom: 98px solid white;
}
html5 css写出一个实心三角形和空心三角行的更多相关文章
- 何使用CSS写出一个下拉菜单。
导航菜单是每个网站所必备的功能,也是每个学习制作网站的朋友所必须接触的,如何用css样式制作一个简单漂亮的二级下拉菜单呢? 下面为大家分享一下我的经验 方法步骤: 第一步 : 首页我们打开Subli ...
- 怎样用css写出一个下拉菜单
<style> 2 /* css*/ 3 #body{ 4 float: left; 5 } 6 #xialakuang{ 7 background-color:#f9f9f9; 8 bo ...
- css写出三角形(兼容IE)
css写出三角形 利用css写三角形,兼容IE7 .arrow-up { width:0px; height:0px; border-left:10px solid transparent; bo ...
- 用js写出一个漂亮的单选框选中效果
一般的input框比较简单,我们可以用JavaScript配合css背景图片定位让我们模拟写出一个点击选中效果 首先需要有个图片素材,当页面加载的时候是背景图片定位到左图,当我们点击图片的时候,背景图 ...
- css写出0.5px边框(一)
在移动端会出现线条太粗的现象,简单来说,是因为手机端的像素单位和ui的图比例是2:1,所以ui图的1px边框对我们来说就是0.5px,但是浏览器渲染的最小单位就是1px,下面给几种方法用css写出0. ...
- 输入一个数字n 如果n为偶数则除以2,若为奇数则加1或者减1,直到n为1,求最少次数 写出一个函数
题目: 输入一个数字n 如果n为偶数则除以2,若为奇数则加1或者减1,直到n为1,求最少次数 写出一个函数 首先,这道题肯定可以用动态规划来解, n为整数时,n的解为 n/2 的解加1 n为奇数时 ...
- java————数组 简单写出一个管理系统
数组的特点 1, 数组是一块连续的空间,下标描述空间的位置. 2, 下标从0开始,最大下标为数组长度—1.(*.length-1) 3, 数组元素都是变量.(就是每个下标对应的内容).变量的类型 ...
- 用HTML+CSS画出一个同心圆
参加web前端校招的同学们经常会遇到这样的面试题:用HTML+CSS画出一个同心圆. 例如: 这道题主要考验的是基础盒模型布局能力和倒圆角属性的巧用. 1.html代码 <body> &l ...
- 如何写出一个让人很难发现的bug?
程序员的日常三件事:写bug.改bug.背锅.连程序员都自我调侃道,为什么每天都在加班?因为我的眼里常含bug. 那么如何写出一个让(坑)人(王)很(之)难(王)发现的bug呢? - 1 -新手开发+ ...
随机推荐
- base64编码的图片在网页中显示
<img @error="changeImgSrc(user)" :src="user.src" width="42" height= ...
- 用反射机制和pandas,实现excel数据的读取以及参数化${arg}的赋值
反射类:class GetData: index = pd.read_excel(file_name, sheet_name).loc[0, ['index']].values[0] email = ...
- Android 版的多合一Office应用也正式向iOS开放了
导读 在 Android 版的多合一 Office 应用「偷跑」不久后(官方证实上线时间比计划要早),为 iOS 准备的版本现在终于也结束 beta 测试正式上线了. 和只提供「有限」平板支持的 An ...
- C语言程序设计(六) 循环控制结构
第六章 循环控制结构 循环结构:需要重复执行的操作 被重复执行的语句序列称为循环体 计数控制的循环 条件控制的循环 当型循环结构 直到型循环结构 for while do-while while(循环 ...
- 为什么vue中的data用return返回呢?
不使用return包裹的数据会在项目的全局可见,会造成变量污染:使用return包裹后数据中变量只在当前组件中生效,不会影响其他组件. 当一个组件被定义, data 必须声明为返回一个初始数据对象的函 ...
- Windows通过VNC连接并显示Linux桌面(Ubuntu16.04)
目录 Linux中安装VNC服务 Linux中安装桌面环境 Windows中安装VNC Viewer Linux中安装VNC服务 sudo apt-get update sudo apt-get in ...
- LeetCode-最长回文串
题目描述: 给定一个包含大写字母和小写字母的字符串,找到通过这些字母构造成的最长的回文串. 在构造过程中,请注意区分大小写.比如 "Aa" 不能当做一个回文字符串. 注意:假设字符 ...
- 谈谈一些逻辑相同,性能差异却很大的sql
总结写在前面: 1. 本篇讲述了三个例子,其本质都是揭示了若对索引字段做函数操作,可能会破坏索引值的有序性,由此优化器就决定放弃走树搜索功能. 2. 由第1点提供了一个优化思路,即我们能否避免或转化s ...
- 基于.NetCore3.1搭建项目系列 —— 使用Swagger做Api文档 (下篇)
前言 回顾上一篇文章<使用Swagger做Api文档 >,文中介绍了在.net core 3.1中,利用Swagger轻量级框架,如何引入程序包,配置服务,注册中间件,一步一步的实现,最终 ...
- WEB应用之httpd基础入门(一)
前文我们聊了下http协议web服务的一些常识和httpd服务器软件三种响应模型的简单介绍,回顾请参考https://www.cnblogs.com/qiuhom-1874/p/12515075.ht ...