For web page creation-CodePudding

this arrow how?

CodePudding user response:

CodePudding user response:

 & lt; ! DOCTYPE html> 
 
 
<meta charset="utf-8" & gt; 
  
 
<style> 
The arrow {
position: relative; 
Background - color: # 31 b0d5; 
width: 100px; 
Height: 300 px; 
} 
Arrow: : before, arrow: : after {
Content: ""; 
position: absolute; 
left: 50%; 
The transform: translateX (50%); 

} 
Arrow: : before {
Top: 70 px; 
Border - width: 40 px; 
Border - style: solid; 
Border - color: transparent transparent darkorange transparent; 
} 
Arrow: : after {
Bottom: 20 px; 
Width: 30 px; 
Height: 130 px; 
Background - color: darkorange; 
} 
</style> 
<body>