首页用html/css写一段完整的代码绘制两点之间的浮动箭头

用html/css写一段完整的代码绘制两点之间的浮动箭头

时间: 2024-01-26 08:03:45 浏览: 29

Sure! Here's an example of HTML and CSS code to draw a floating arrow between two points: ```html <!DOCTYPE html> <html> <head> <style> .arrow-container { position: relative; height: 200px; width: 200px; } .arrow { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 200px; height: 2px; background-color: black; } .arrow::before { content: ""; position: absolute; top: -8px; left: 100%; width: 0; height: 0; border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-left: 8px solid black; } .arrow::after { content: ""; position: absolute; top: -8px; left: calc(100% + 8px); width: 0; height: 0; border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-left: 8px solid white; } </style> </head> <body> <div class="arrow-container"> <div class="arrow"></div> </div> </body> </html> ``` This code will draw a floating arrow between two points. The arrow element is positioned absolutely within a container, and the arrow itself is created using a `div` with CSS properties for its width, height, and background color. The `::before` and `::after` pseudo-elements are used to create the arrowhead. You can adjust the size and styling of the arrow by modifying the CSS properties. Just copy this code into an HTML file and open it in a browser to see the result.