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. ISO/IEC 9899:2011 条款6.4.1——关键字

    6.4.1 关键字 语法 1.以下为关键字: auto    break    case    char    const    continue    default    do    double ...

  2. ifc tree

    ViewerWidget* viewerWidget = new ViewerWidget(ifcModel); viewerWidget ->setRootNode(ifcModel-> ...

  3. Cisco Port-Channel 设置(链路聚合--重点)

    Port-Channel 的在实际工作中的主要作用是将两个或多个端口捆绑成为一个虚拟通道. interface Port-channel1 description port(1/0/5-6) swit ...

  4. esxi 配置 交换主机 虚拟机交换机 linux centos 配置双网卡

    最近手里的项目网络环境是 192.168.199.1 直接到防火墙 192.168.1.x 是内网网段 走到 防火墙下的一个三层交换机 现在需要将内网的三台服务器端口映射出去,需要到防火墙去做映射,防 ...

  5. Mysql安装、查看密码、修改密码、初始化、修改字符类型

    安装mysql 参照python篇一键安装lnmp.安装完之后再按照下面修改密码,修改配置文件,否则安装的时候就修改配置文件会出错. 注意:这也是二进制安装mysql.另一种二进制安装容易出错,生产环 ...

  6. 为什么要用k8s

    经过几次面试,发现有的公司没有用过k8s,有的公司正在用,但是都问了共同的问题:k8s的好处在哪里.所以总结了一下几点 1.故障迁移:当某一个node节点关机或挂掉后,node节点上的服务会自动转移到 ...

  7. iOS-UILabel的使用

     常用属性UILabel //显示的文字 @property(nonatomic,copy)   NSString           *text; //字体 @property(nonatomic, ...

  8. 机器学习第一章——NFL的个人理解

    第一篇博客,想给自己的学习加深记忆.看到书中第一个公式时,本来想直接看证明结果就好,然鹅...作者在备注上写:这里只用到一些非常基础的数学知识,只准备读第一章且有“数学恐惧”的读者可跳过...嘤嘤嘤, ...

  9. thinkphp5 引用 phpass加密算法

    引入phpass thinkPHP5 放到扩展目录里 自动加载配置 直接实例化 // 初始化散列器为不可移植(这样更安全) $PasswordHashs = new \PasswordHashs(8, ...

  10. Dapper存储过程以及多次查询和批量写入操作

    一.存储过程操作 1. 准备存储过程 newsreturnvalue(该存储过程计算2个参数的和并返回) USE [ZPC.Contact] GO SET ANSI_NULLS ON GO SET Q ...