HTML CSS examples for CSS Widget:Arrow
CSS3 circle arrow shape
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> * {<!--from w w w . j a v a 2 s .com--> box-sizing:border-box; padding:0; margin:0; } [id=overview] { width:651px; height:481px; background:Chartreuse; position:relative; margin:0 auto; } [id=overview] img { width:51px; height:51px; position:relative; background:yellow; } [id=overview] figcaption { color:blue; margin-top:11px; } [id=overview] figure { padding-top:21px; width:51%; height:51%; position:relative; float:left; border:2px solid pink; text-align:center; } [id=my] { width:151px; height:151px; border-radius:51%; position:absolute; top:51%; left:51%; margin:-76px 0 0 -76px; } [class=arrow-Wrapper] { width:167px; height:167px; border-radius:51%; position:relative; background:OrangeRed; margin:-11px; transition:all 301ms ease; } [class=arrow-Wrapper]:before,[class=arrow-Wrapper]:after { content:""; position:absolute; } [class=arrow-Wrapper]:before { width:0; height:0; border-bottom:21px solid grey; border-left:21px solid BlueViolet; border-right:21px solid Chartreuse; top:13px; left:-5px; transform:rotateZ(-47deg); } [class=arrow-Wrapper]:after { background:yellow; width:81px; height:81px; top:0; left:0; border-top-left-radius:201px; } [id=logo] { width:121px; height:121px; background:blue; z-index:112; border-radius:51%; position:absolute; top:13px; left:13px; color:pink; font-size:6em; font-weight:bolder; text-align:center; line-height:121px; } [id=overview] figure:nth-of-type(1):hover~[id=my] .arrow-Wrapper { transform:rotateZ(0deg); } [id=overview] figure:nth-of-type(2):hover~[id=my] .arrow-Wrapper { transform:rotateZ(92deg); } [id=overview] figure:nth-of-type(3):hover~[id=my] .arrow-Wrapper { transform:rotateZ(270deg); } [id=overview] figure:nth-of-type(4):hover~[id=my] .arrow-Wrapper { transform:rotateZ(181deg); } </style> </head> <body> <section id="overview"> <figure> <img src="https://www.java2s.com/style/demo/Firefox.png"> <figcaption> Lorem ipsum </figcaption> </figure> <figure> <img src="https://www.java2s.com/style/demo/InternetExplorer.png"> <figcaption> Lorem ipsum </figcaption> </figure> <figure> <img src="https://www.java2s.com/style/demo/Safari.png"> <figcaption> Lorem ipsum </figcaption> </figure> <figure> <img src="https://www.java2s.com/style/demo/InternetExplorer.png"> <figcaption> Lorem ipsum </figcaption> </figure> <div id="my"> <div class="arrow-Wrapper"></div> <div id="logo"> Lor </div> </div> </section> </body> </html>