html三角形怎么做
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html三角形怎么做相关的知识，希望对你有一定的参考价值。
虽然有答案了 ， 但也有必要让你知道下 这个可以用css写出来，而且 很简单 很方便
有CSS3属性
包括 IE9 以上 支持 需要 -ms- 和-webkit- 具体 看兼容文档吧
width: 0px;
height: 0px;
border-style: solid;
border-color: transparent transparent transparent red;
border-width: 20px;
transform:rotate(45deg);
参考技术A 你这个是下拉框自带的
如果你要自己做的话难度较大，建议使用阿里巴巴图标库 参考技术B 你好，
这个很简单，不需要那么复杂，
用边框和定位就可以做。 参考技术C
可以参考如下：
<!doctype html><html>
<head>
<meta charset="UTF-8">
<meta name="Generator" content="">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>三角形</title>
<style>
.label
display:inline-block;
position:relative;
padding:10px;
border:1px solid #ccc;
.label:after
content:'';
display:inline-block;
position:absolute;
width:0;
height:0;
right:-10px;
bottom:-10px;
border:10px solid #777;
border-top-color:transparent;
border-right-color:transparent;
border-bottom-color:transparent;
transform:rotate(45deg);
-ms-transform:rotate(45deg); /* IE 9 */
-moz-transform:rotate(45deg); /* Firefox */
-webkit-transform:rotate(45deg); /* Safari 和 Chrome */
-o-transform:rotate(45deg); /* Opera */
</style>
</head>
<body>
<div class="label">
简体中文
</div>
</body>
</html> 参考技术D 找一个一样图片 ,然后定位在右下角就行了
求CSS大神，图中这个边框怎么做出来
带箭头的边框，好像需要旋转，不是很会，求大神
思路：一个矩形，一个正方形，将正方形的边框去掉两边，留两边，这样就形成了一个打开的三角形，然后旋转打开的三角形，利用相对定位移动到矩形右侧，接着将正方形的背景颜色设置白色，覆盖矩形右侧边框。
<!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>demo</title>
<style>
body>div
width: 300px;
height: 200px;
border: 1px solid red;
padding: 10px;
/* 矩形 */
#rectangle
width: 80px;
height: 20px;
border: 1px solid #CEEBD4;
float: left;
padding: 5px 0 5px 10px;
color: #808280;
/* 三角形 */
#triangle
width: 15px;
height: 15px;
border-left: 1px solid #CEEBD4;
border-bottom: 1px solid #CEEBD4;
float: left;
position: relative;
left: -8px;
top: 8px;
background-color: white;
/* 旋转 */
-webkit-transform: rotate(-135deg);
</style>
</head>
<body style="padding:100px;">
<div>
<div id="rectangle">扫码登录</div>
<div id="triangle"></div>
</div>
</body>
</html>
打开浏览器，访问该文件，效果如下图：
直接裁剪不就ok了，哪里这么麻烦，就是一个长方形，然后裁剪一下就ok了，别去搞什么旋转，越高头越大。你这个形状裁剪就是这样的：
-webkit-clip-path: polygon(81% 0, 81% 31%, 100% 55%, 79% 77%, 79% 100%, 0 100%, 0 0);clip-path: polygon(81% 0, 81% 31%, 100% 55%, 79% 77%, 79% 100%, 0 100%, 0 0);
大概就是这么个意思，裁剪，搞几个坐标就ok了。有现成的裁剪工具可以用。
以上是关于html三角形怎么做的主要内容，如果未能解决你的问题，请参考以下文章