<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>svg实现直线带右箭头</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box; /*保证盒子的大小不会因为padding值的影响而变大。默认情况下padding的值会影响盒子的大小*/
}
html, body {
width: 100%;
height: 100%;
background: lightblue;
/*背景图片同窗口完全自适应*/
background-size: 100% 100%;
/*去除页面的滚动条*/
overflow: hidden;
}
#box {
width: 20%;
height: 2.5%;
/*border: yellow solid 1px;*/
margin-left: 30%;
margin-top: 20%;
}
#svg14 {
height: 100%;
width: 100%;
overflow: hidden;
}
#polygon14 {
fill: black;
stroke-width: 1;
stroke: red;
}
</style>
</head>
<body>
<div id="box">
<svg id="svg14" viewBox="0 0 305 15" preserveaspectratio='none'>
<polygon id="polygon14" points='1,7 300,7 295,1 304,7 295,14 300,7 ' />
</svg>
</div>
</body>
</html>
svg实现直线带右箭头
最新推荐文章于 2022-05-22 11:06:26 发布