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. java导入excel很完美的取值的方法

    java导入excel很完美的取值的方法   1.解决方法: /**    * 获取单元格数据内容为字符串类型的数据    * @param cell Excel单元格    * @return St ...

  2. 新手pyhoner的指定内容读取和写入的思路

    在linux上,很容易碰到操作文件的内容,读取指定信息的情况,或者要求在指定内容中追加内容,其实两个flag标识符就能解决. 先上个图: 执行while flag==0即可: while flag== ...

  3. 获取src 内容

    获取(代码): ].src; // 测试无效 修改(代码): 1 $("#img").attr('src',path);

  4. ubuntu18.04中将刚下载解压的eclipse添加到启动器

    在/usr/share/applications/目录下新建一个名为eclipse.desktop的文件. 文件内容如下: [Desktop Entry] Version=2018.09 Name=E ...

  5. 【Leetcode_easy】724. Find Pivot Index

    problem 724. Find Pivot Index 题意:先求出数组的总和,然后维护一个当前数组之和curSum,然后对于遍历到的位置,用总和减去当前数字,看得到的结果是否是curSum的两倍 ...

  6. Xena L23网络测试仪Valkyrie使用技巧100例：修改设备管理IP，设备关机 (编号01)

    Xena Valkyrie产品提供100M~400Gbps全速率接口速率支持 产品链接 https://xenanetworks.com/valkyrie/ 需求# 1.多个用户如何共享使用一个机箱? ...

  7. go timer定时器 WaitGroup用法

    参考文章: timer定时器: https://www.cnblogs.com/oxspirt/p/7107312.html WaitGroup用法: https://studygolang.com/ ...

  8. weblogic搭建总结

    目录: 一.安装weblogic软件 二.创建域 三.启动管理节点 四.创建被管理节点 五.部署应用 一.安装weblogic软件 一.关闭selinux和防火墙 service iptables s ...

  9. jira使用一：如何给项目分组、sprint并行、禁止发送消息给atlassian

    问题一:如何设置多个sprint并行? 问题二: 如何分组显示 设置泳道,并快速过滤 问题3:添加所属产品? 管理员登录Jira后台设置-问题-自定义字段找到:所属产品,进入 配置 界面在配置界面中, ...

  10. nginx之配置proxy_set_header问题梳理

    客户端请求web服务,客户端:ip:192.168.223.1 nginx作为反向代理服务器:192.168.223.136 nginx作为后端web服务器:192.168.223.137 前提条件: ...