HTML：
 
 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>旗帜</title>
<link rel="stylesheet" href="work1.css">
</head>
<body>
<div class="qwe"></div>
<div class="www"></div>
<div class="t0"></div>
</body>
</html>
 
 
CSS：
 
 
.www{
height: 1000px;
width: 15px;
background-color: black;
display: inline-block;
margin: -5px;
padding: 0;
}
.t0{
margin:30px;
height:0px;
width:0px;
border-top:solid 300px red;
border-left:solid 300px rgba(0, 0, 0, 0);
border-right: solid 300px rgba(0, 0, 0, 0);
display: inline-block;
}
.qwe{
height: 205px;
width: 300px;
background-color: red;
vertical-align: top;
display: inline-block;
margin-top: -5px;
padding: 0;
}

使用HTML CSS制作简易三角形和旗帜的更多相关文章

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

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

  2. 纯CSS制作空心三角形和实心三角形及其实现原理

    纯CSS制作空心三角形和实心三角形及其实现原理 在一次项目中需要使用到空心三角形,我瞬间懵逼了.查阅了一些资料加上自己的分析思考,终于是达到了效果,个人感觉制作三角形是使用频率很高的,因此记录下来,供 ...

  3. html+css 制作简易导航栏

    二话不说直接上代码(萌新:实在也没什么好说的) <!DOCTYPE html> <html lang="en" xmlns="http://www.w3 ...

  4. CSS制作三角形和按钮

    CSS制作三角形和按钮 用上一篇博文中关于边框样式的知识点,能制作出三角形和按钮. 我先说如何制作三角形吧,相信大家在平时逛网站的时候都会看到一些导航栏中的三角形吧,比如说: 网易首页的头部菜单栏中, ...

  5. CSS 制作三角形原理剖析

    使用css制作三角形其实原理很简单,下面一步步解析. 1.html代码如下 <div class="triangle"> </div> 2.CSS代码 .t ...

  6. 用css制作三角形

    用css制作三角形,主要是利用css元素给“盒模型”设置边框得到的. 上图,上边框和做边框,以及上边框和右边框的交合处,浏览器会按照直角的二分之一处绘制交合线.这是“盒模型”有宽和高时候的效果.我们假 ...

  7. css制作tips提示框，气泡框，制作三角形

    有时候我们的页面会需要这样的一些提示框或者叫气泡框,运用css,我们可以实现这样的效果. 为了实现上面的效果,我们首先要理解如何制作三角形. 当我们给一个DIV不同颜色的边框的时候,我们可以得到下面的 ...

  8. css制作三角形，下拉框三角形

    网站制作中常常需要下拉框,而如果下拉框如果只是单纯的矩形则会显得太过单调,所以这次教大家利用css制作三角形放在矩形上面 首先利用css制作三角形 div { width:0px; height:0p ...

  9. CSS制作的32种图形效果[梯形|三角|椭圆|平行四边形|菱形|四分之一圆|旗帜]

    转载链接:http://www.w3cplus.com/css/css-simple-shapes-cheat-sheet 前面在<纯CSS制作的图形效果>一文中介绍了十六种CSS画各种不 ...

随机推荐

  1. List的remove()方法的三种正确打开方式

    转: java编程:List的remove()方法的三种正确打开方式! 2018年08月12日 16:26:13 Aries9986 阅读数 2728更多 分类专栏: leetcode刷题   版权声 ...

  2. 123457123456-－－熊猫猜谜语02(儿童猜谜语大全)－－com.threeObj03.CaiMiYu02

    熊猫猜谜语02(儿童猜谜语大全)--com.threeObj03.CaiMiYu02

  3. java中快速读写图片到BufferedImage对象

    java7读取文件到BufferedImage对象 BufferedImage bufferedImage = ImageIO.read(Files.newInputStream(Paths.get( ...

  4. SQLite 的简单使用

    程序运行结果如下 : 输入name和age,点击"确认插入"按钮,即插入一条记录到数据库. 程序代码如下:(有详细注释,相信大家都看得懂哈!!!) ////  ViewContro ...

  5. PostgreSQL学习笔记——事务

    事务时需要在同一处理单元中执行的一系列更新处理的集合.通过使用事务,可以对数据库中的数据更新处理的提交和取消进行管理. 事务处理的终止指令包括COMMIT(提交处理)和ROLLBACK(取消处理)两种 ...

  6. jquery图片播放插件Fancybox使用详解

    今天给大家介绍的jquery图片播放插件叫Fancybox,相比LightBox来说,Fancybox相对庞大点,配置也更丰富一些,相信你会喜欢的. Fancybox的项目主页地址:http://fa ...

  7. Kali之Metasploit生成apk后门控制安卓

    扫盲教程,大佬勿喷. 实验中请更改为你环境的IP. 生成apk后门 Kali Linux(Hack):192.168.169.76 Android(靶机):192.168.169.137 启动kali ...

  8. www.zhaoyueyi.cn

    2019/6/20这一天.我筹划了很久,准备搞点事情; 然后去阿里云上买下了我思虑已久的服务器以及域名,以前一直舍不得买,或许也是因为舍不得买的原因,我的技术一直很low,处于很肤浅的水平 虽然工作4 ...

  9. 【C/C++开发】运算符重载二

    C++中预定义的运算符的操作对象只能是基本数据类型.但实际上,对于许多用户自定义类型(例如类),也需要类似的运算操作.这时就必须在C++中重新定义这些运算符,赋予已有运算符新的功能,使它能够用于特定类 ...

  10. CenOS 7 安装JDK

    1.输入安装命令 yum install java-1.8.0-openjdk-devel.x86_64