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. 利用XMl标签定义动画

    渐变透明度动画 <?xml version="1.0" encoding="utf-8"?> <alpha xmlns:android=&qu ...

  2. Linux给力的Shell命令

    查看目录下面的所有目录 ls /dev/ -F |grep "/"   bus/    disk/    input/  说明: ls -F命令将文件和目录后面添加一个特定的符号; ...

  3. selenium元素input的value值设置【node.js版本】

    driver.executeScript(‘document.getElementById(“id”).value=“value”’); 这个操作就类似于//$("#id").va ...

  4. 123457123457#0#-----com.yimeng.wangZheChengYu01--前拼后广--成语头脑王者

    com.yimeng.wangZheChengYu01--前拼后广--成语头脑王者

  5. [转]Postgres-XL 10r1英文文档

    Postgres-XL 是一个完全满足ACID的.开源的.可方便进行水平扩展的.多租户安全的.基于PostgreSQL的数据库解决方案. Postgres-XL 可非常灵活的应用在各类场景中,比如: ...

  6. 编写高质量iOS代码与OS X代码的effective方法（小结）

    一.熟悉OC: 了解OC的起源: OC和C++,Java等面向对象语言类似,不过有很方面差别.因为该语言使用  消息结构而非函数调用. 消息结构和函数调用的区别:前者是在其运行时所应执行的代码由运行环 ...

  7. Docker storage driver(十四)

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

  8. C/C++语言，自学资源，滚动更新中……

    以下教学视频中,缺少对“字符串”技术的讨论,大家注意看书. 一维数组,及其举例:(第四版)P77~P85,书上这部分内容写的很好,很详细,尤其是这里列出来的每一个例子都要仔细去看一看,对你会很有帮助. ...

  9. c# 如何给 dataGridView里添加一个自增长列(列名为序号)

    System.Data.DataTable table = new DataTable();                System.Data.DataColumn column = new Da ...

  10. Python（1）自动发送邮件

    python发邮件需要掌握两个模块的用法,smtplib和email,这俩模块是python自带的,只需import即可使用.smtplib模块主要负责发送邮件,email模块主要负责构造邮件. sm ...