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. API的查看

    步骤: 1. 双击打开API 2. 点击显示, 找到索引 3. 输入要查找的类名 , 敲击Enter两次 4. 看该类所属的包, java.lang包下的类,在使用的时候不需要导包 ,其他的都需要导包 ...

  2. LVS的调度算法介绍

    1.轮询调度(rr) 轮询调度(Round Robin 简称'RR')算法就是按依次循环的方式将请求调度到不同的服务器上,该算法最大的特点就是实现简单.轮询算法假设所有的服务器处理请求的能力都一样的, ...

  3. (1) Java实现JDBC连接及事务的方式

    许多数据库的auto-commit默认是ON的,比如MySQL,PostgresSQL等.当然也有默认是OFF的,比如Oracle(Oracle里面执行DML语句是需要手动commit的). 这里我们 ...

  4. 01.轮播图之二 ：tableView 轮播

    在做这个tablevew轮播的时候,重要的就是修改frame 和view 的翻转了:::: 也是不难的,概要的设计和scroll 轮播是一致的: 首先是 .h 的文件 @interface Table ...

  5. Docker storage driver(十四)

    目录 一.storage driver 作用 1.Images and layers 2.Container and layers Copy-on-Write 3.Data volumes and t ...

  6. Newton法（牛顿法 Newton Method）

               1.牛顿法应用范围                          牛顿法主要有两个应用方向:1.目标函数最优化求解.例:已知 f(x)的表达形式,,求 ,及g(x)取最小值时 ...

  7. Target Sum

    You are given a list of non-negative integers, a1, a2, ..., an, and a target, S. Now you have 2 symb ...

  8. 使ssh记住密码

    前面介绍过Conemu , Msys2工具,提升了windows本地文件操作的效率,但使用ssh时候,总需要重新输入密码,不能像SercurityCRT等工具记住密码,使用时不是很爽快. 其实通过ss ...

  9. C++ algorithm算法库

    C++ algorithm算法库 Xun 标准模板库(STL)中定义了很多的常用算法,这些算法主要定义在<algorithm>中.编程时,只需要在文件中加入#include<algo ...

  10. wordpress5.0+中 Notice: Undefined index: HTTP_REFERER 问题解决

    都说现在搭网站很简单了,但真遇到问题了还真不一定能解决. 这次搭建的网站是用的wordpress版本5.0.4,以为操作和以前的低版本一样,结果做出来还是遇到问题了. 网站搭好后,首页总在顶端出现一行 ...