We Keep Coding

creating arrow representation on below tabs

I'm trying to create the following structure on click of each button i want to show small triangle representation to the center of button on the top of container
but i has no idea to achieve this. it would be helpful for suggestions and help
.arrow_box {
position: relative;
border:2px solid green;
height:200px;
}
.arrow_box:after {
bottom: 100%;
left: 50%;
border: solid transparent;
content: "";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(0, 0, 0, 0);
border-bottom-color: black;
border-width: 15px;
margin-left: -15px;
}
<div>
<button>left</button>
<button>center</button>
<button>right</button>
<div class="arrow_box"></div>
</div>

Here I hacked some garbage together for you.
button {
position: relative;
}
button:focus:before{
border:2px solid green;
height:200px;
width: 300px;
content: "";
position: absolute;
top: 200%;
left: -20%;
border:2px solid green;
}
button:focus:after {
bottom: -100%;
left: 50%;
border: solid transparent;
content: "";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(0, 0, 0, 0);
border-bottom-color: black;
border-width: 15px;
margin-left: -15px;
}
<div>
<button>left</button>
<button>center</button>
<button>right</button>
<div class="arrow_box"></div>
</div>

How can I fade text in using JavaScript with button

I have a function for the button already but I can't figure out what I need to add to make it fade in
myFunction = () => {
var x = document.getElementById("myDIV");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
Do I need to make a new function or can I add it to my existing one?
Here is my CSS
opacity: 1;
transition: 0.7s opacity;
}
#h3.fade {
opacity: 0;
transition: none;
}
You can see the whole code here.

Your problem is you are removing the transition, so it causes it to not transition, but just jump. Leave the transition on the whole time, and just change the opacity:
const target = document.querySelector('#target');
document.querySelector('button').addEventListener('click', () => {
target.classList.contains('fade')
? target.classList.remove('fade')
: target.classList.add('fade');
});
#target {
transition: 1s opacity;
opacity: 1;
width: 100px;
height: 50px;
background: #F00;
}
#target.fade {
opacity: 0;
}
<div id="target"></div>
<button>Toggle</button>

Use fadeIn() and fadeOut() functions as given below.
myFunction = () => {
var x = document.getElementById("myDIV");
if (x.style.display === "none") {
$("#myDIV").fadeIn();
} else {
$("#myDIV").fadeOut();
}
}
.button-holder {
position: absolute;
margin: auto;
height: 25px;
top: 260px;
left: 0;
width:100%;
text-align: center;
}
.Box {
position: relative;
margin: auto;
display: block;
border: solid 4px skyBlue;
margin-top: 2%;
width: 600px;
height: 450px;
background: none;
z-index: -1
}
.tittle {
text-align: center;
font-family: 'courier new', Courier, monospace;
}
.speech-buble-top {
position: relative;
display: block;
border: solid 4px black;
top: -15%;
left: ;
width: 200px;
height: 100px;
background: white;
border-radius: 50%;
text-align: center
}
#h3 {
position: absolute;
text-align: center;
vertical-align: center;
width: 90%;
height: 80%;
left: 10px;
font-size: 25px;
background: none;
border: none;
border-radius: 5px;
opacity: 1;
transition: 0.7s opacity;
}
#h3.fade {
opacity: 0;
transition: none;
}
.speech-buble-bottom {
position: relative;
display: triangle;
border-right: solid 4px black;
border-bottom: solid 4px black;
top: -23.5%;
left: 30%;
width: 15px;
height: 20px;
background: white;
z-index: 1;
transform: rotate(13deg);
}
.balloon-1 {
position: absolute;
top: -2%;
left: 70%;
width: 100px;
height: 110px;
background: red;
border-radius: 50%;
z-index: 1;
}
.balloon-bottom-1 {
position: absolute;
top: 22%;
left: 76%;
height: 0;
width: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-top: transparent;
border-bottom: 15px solid red;
z-inedx: 1;
}
.balloon-string-1 {
position: absolute;
top: 29.5%;
left: 69%;
width: 80px;
height: 20px;
border: solid 6px #000;
border-color: #000 transparent transparent transparent;
border-radius: 50%/100px 100px 0 0;
border-radius: 50%;
border-right: solid 5px black;
transform: rotate(100deg);
z-inedx: -1;
}
.balloon-2 {
position: absolute;
top: -8%;
left: 75%;
width: 100px;
height: 110px;
background: #228B22;
border-radius: 50%;
z-index: -1;
}
.balloon-string-2 {
position: absolute;
top: 26%;
left: 69%;
width: 110px;
height: 20px;
border: solid 6px #000;
border-color: #000 transparent transparent transparent;
border-radius: 50%/100px 100px 0 0;
border-radius: 50%;
border-right: solid 5px black;
transform: rotate(115deg);
z-inedx: -1;
}
.balloon-3 {
position: absolute;
top: -4%;
left: 78%;
width: 100px;
height: 110px;
background: #9400D3;
border-radius: 50%;
z-index: -1;
}
.balloon-bottom-3 {
position: absolute;
top: 20%;
left: 84%;
height: 0;
width: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-top: transparent;
border-bottom: 15px solid #9400D3;
}
.balloon-string-3 {
position: absolute;
top: 29%;
left: 71%;
width: 110px;
height: 20px;
border: solid 6px #000;
border-color: #000 transparent transparent transparent;
border-radius: 50%/100px 100px 0 0;
border-radius: 50%;
border-right: solid 5px black;
transform: rotate(120deg);
z-inedx: -1;
}
.balloon-4 {
position: absolute;
top: -2%;
left: 85%;
width: 100px;
height: 110px;
background: #FFD700;
border-radius: 50%;
z-index: 1;
}
.balloon-bottom-4 {
position: absolute;
top: 22%;
left: 91%;
height: 0;
width: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-top: transparent;
border-bottom: 15px solid #FFD700;
}
.balloon-string-4 {
position: absolute;
top: 29.5%;
left: 73%;
width: 130px;
height: 20px;
border: solid 6px #000;
border-color: #000 transparent transparent transparent;
border-radius: 50%/100px 100px 0 0;
border-radius: 50%;
border-right: solid 5px black;
transform: rotate(140deg);
z-inedx: -1;
}
.head {
position: absolute;
top: 5%;
left: 40%;
width: 125px;
height: 135px;
background: pink;
border-radius: 5px;
}
.l-lash-1 {
position: absolute;
top: 10%;
left: 28%;
width: 3%;
height: 8%;
background: black;
transform: rotate(-50deg)
}
.l-lash-2 {
position: absolute;
top: 8%;
left: 30%;
width: 3%;
height: 8%;
background: black;
transform: rotate(-30deg)
}
.l-lash-3 {
position: absolute;
top: 8%;
left: 33%;
width: 3%;
height: 6%;
background: black;
transform: rotate(-20deg)
}
.r-lash-1 {
position: absolute;
top: 10%;
left: 75%;
width: 3%;
height: 8%;
background: black;
transform: rotate(50deg)
}
.r-lash-2 {
position: absolute;
top: 8%;
left: 73%;
width: 3%;
height: 8%;
background: black;
transform: rotate(30deg)
}
.r-lash-3 {
position: absolute;
top: 8%;
left: 70%;
width: 3%;
height: 6%;
background: black;
transform: rotate(20deg)
}
.eye-left {
position: absolute;
top: 15px;
left: 35px;
width: 30px;
height: 50px;
background: white;
border-radius: 50%;
border-left: solid 3px lightGrey;
}
.eye-right {
position: absolute;
top: 15px;
left: 66px;
width: 30px;
height: 50px;
background: white;
border-radius: 5px;
border-radius: 50%;
border-left: solid 3px lightGrey;
}
.inner-eye-left {
position: absolute;
top: 15%;
left: 19%;
width: 42%;
height: 45%;
background: black;
border-radius: 50%;
border-left: solid 9px darkOliveGreen;
border-top: solid 9px darkOliveGreen;
border-bottom: solid 9px darkOliveGreen;
}
.inner-eye-right {
position: absolute;
top: 15%;
left: 0%;
width: 42%;
height: 45%;
background: black;
border-radius: 50%;
border-left: solid 9px darkOliveGreen;
border-top: solid 9px darkOliveGreen;
border-bottom: solid 9px darkOliveGreen;
}
.pupil-left {
position: absolute;
top: 15%;
left: 15%;
width: 42%;
height: 35%;
background: white;
border-radius: 50%;
}
.pupil-right {
position: absolute;
top: 15%;
left: 10%;
width: 35%;
height: 30%;
background: white;
border-radius: 50%;
}
.hair-left {
position: absolute;
top: -25%;
left: 45%;
width: 5%;
height: 30%;
background: pink;
transform: rotate(-30deg)
}
.hair-right {
position: absolute;
top: -18%;
left: 60%;
width: 5%;
height: 25%;
background: pink;
transform: rotate(30deg)
}
.hair-top-left {
position: absolute;
top: -30%;
left: 32%;
width: 15%;
height: 13%;
background: pink;
border-radius: 50%;
}
.hair-top-right {
position: absolute;
top: -25%;
left: 65%;
width: 15%;
height: 13%;
background: pink;
border-radius: 50%;
}
.mouth-top {
position: absolute;
top: 60%;
left: 29%;
width: 50%;
height: 17%;
background: pink;
border-radius: 50%;
z-index: 1;
}
.mouth {
position: absolute;
top: 61%;
left: 29%;
width: 50%;
height: 17%;
background: none;
border-radius: 50%;
border-bottom: solid 4px black;
}
.ear-bar-1 {
position: absolute;
top: 34%;
left: -9%;
width: 120%;
height: 31%;
background: lightGrey;
z-index: -1;
}
.ear-bar-2 {
position: absolute;
top: 40%;
left: -18%;
width: 140%;
height: 19%;
background: pink;
z-index: -2;
}
.ear-bar-3 {
position: absolute;
top: 45%;
left: -25%;
width: 155%;
height: 10%;
background: lightGrey;
z-index: -3;
}
.ear-left-circle {
position: absolute;
top: 41%;
left: -37%;
width: 17%;
height: 17%;
background: pink;
border-radius: 50%
}
.ear-right-circle {
position: absolute;
top: 41%;
left: 125%;
width: 17%;
height: 17%;
background: pink;
border-radius: 50%
}
.neck {
position: absolute;
top: 100%;
left: 26.5%;
width: 50%;
height: 12%;
background: lightGrey;
border-radius: 5px
}
.upper-body {
position: absolute;
top: 110%;
left: -15%;
width: 130%;
height: 125%;
background: pink;
border-radius: 5px;
z-index: +1
}
.bullet-1 {
position: absolute;
top: 5%;
left: 5%;
width: 8%;
height: 8%;
background: lightGrey;
border-radius: 50%
}
.bullet-2 {
position: absolute;
top: 5%;
left: 88%;
width: 8%;
height: 8%;
background: lightGrey;
border-radius: 50%
}
.bullet-3 {
position: absolute;
top: 88%;
left: 5%;
width: 8%;
height: 8%;
background: lightGrey;
border-radius: 50%
}
.bullet-4 {
position: absolute;
top: 88%;
left: 88%;
width: 8%;
height: 8%;
background: lightGrey;
border-radius: 50%
}
.heart-left {
position: absolute;
top: 20%;
left: 68%;
width: 8%;
height: 15%;
background: red;
border-radius: 50%;
transform: rotate(-25deg)
}
.heart-right {
position: absolute;
top: 20%;
left: 72%;
width: 8%;
height: 15%;
background: red;
border-radius: 50%;
transform: rotate(25deg)
}
.hand-left {
position: absolute;
top: 132%;
left: -85%;
width: 80%;
height: 20%;
background: pink;
transform: rotate(30deg);
z-index: -1;
}
.hand-right {
position: absolute;
top: 132%;
left: 100%;
width: 80%;
height: 20%;
background: pink;
transform: rotate(-35deg);
z-index: 1;
}
.h-line-1 {
position: absolute;
top: 34%;
left: 1%;
width: 35%;
height: 38%;
background: lightGrey;
transform: rotate(90deg);
z-index: -1;
}
.h-line-2 {
position: absolute;
top: 34%;
left: 20%;
width: 35%;
height: 38%;
background: lightGrey;
transform: rotate(90deg);
z-index: -1;
}
.h-line-3 {
position: absolute;
top: 34%;
left: 40%;
width: 35%;
height: 38%;
background: lightGrey;
transform: rotate(90deg);
z-index: -1;
}
.h-line-4 {
position: absolute;
top: 34%;
left: 60%;
width: 35%;
height: 38%;
background: lightGrey;
transform: rotate(90deg);
z-index: -1;
}
.palm-left {
position: absolute;
top: 0%;
left: -30%;
width: 42%;
height: 60%;
background: none;
border-top: solid 14px lightGrey;
border-radius: 50%;
transform: rotate(90deg);
}
.palm-right {
position: absolute;
top: 0%;
left: 85%;
width: 42%;
height: 60%;
background: none;
border-top: solid 14px lightGrey;
border-radius: 50%;
transform: rotate(270deg);
}
.left-leg {
position: absolute;
top: 235%;
left: 0%;
width: 35%;
height: 80%;
background: pink;
z-index: -1;
}
.right-leg {
position: absolute;
top: 235%;
left: 68%;
width: 35%;
height: 80%;
background: pink;
z-index: -1;
}
.l-line-1 {
position: absolute;
top: 0%;
left: 37%;
width: 25%;
height: 50%;
background: lightGrey;
transform: rotate(90deg);
z-index: -1;
}
.l-line-2 {
position: absolute;
top: 20%;
left: 37%;
width: 25%;
height: 50%;
background: lightGrey;
transform: rotate(90deg);
z-index: 1;
}
.l-line-3 {
position: absolute;
top: 40%;
left: 37%;
width: 25%;
height: 50%;
background: lightGrey;
transform: rotate(90deg);
z-index: 1;
}
.shoe-left {
position: absolute;
top: 90%;
left: -10%;
width: 120%;
height: 20%;
background: none;
border-top: solid 18px lightGrey;
border-radius: 50%;
z-index: +1
}
.shoe-right {
position: absolute;
top: 90%;
left: -10%;
width: 120%;
height: 20%;
background: none;
border-top: solid 18px lightGrey;
border-radius: 50%;
z-index: +1
}
<html>
<head>
<title>Bootstrap</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="setest_style.css">
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<h1 class="tittle">Robot</h1>
<div class="button-holder"><button class="button" onclick="myFunction()">Click Me</button></div>
<div class="Box">
<div class="speech-buble-top">
<div id="myDIV" style="display: none">
<h3 id="h3"> Happy Birthday Tiffany!</h3>
</div>
</div>
<div class="speech-buble-bottom"></div>
<div class="balloon-1"></div>
<div class="balloon-2"></div>
<div class="balloon-3"></div>
<div class="balloon-4"></div>
<div class="balloon-bottom-1"></div>
<div class="balloon-bottom-3"></div>
<div class="balloon-bottom-4"></div>
<div class="balloon-string-1"></div>
<div class="balloon-string-2"></div>
<div class="balloon-string-3"></div>
<div class="balloon-string-4"></div>
<div class="head">
<div class="eye-left">
<div class="inner-eye-left"></div>
<div class="pupil-left"></div>
</div>
<div class="eye-right">
<div class="inner-eye-right"></div>
<div class="pupil-right"></div>
</div>
<div class="l-lash-1"></div>
<div class="l-lash-2"></div>
<div class="l-lash-3"></div>
<div class="r-lash-1"></div>
<div class="r-lash-2"></div>
<div class="r-lash-3"></div>
<div class="hair-left"></div>
<div class="hair-right"></div>
<div class="hair-top-left"></div>
<div class="hair-top-right"></div>
<div class="mouth-top"></div>
<div class="mouth"></div>
<div class="ear-bar-1"></div>
<div class="ear-bar-2"></div>
<div class="ear-bar-3"></div>
<div class="ear-left-circle"></div>
<div class="ear-right-circle"></div>
<div class="neck"></div>
<div class="upper-body">
<div class="bullet-1"></div>
<div class="bullet-2"></div>
<div class="bullet-3"></div>
<div class="bullet-4"></div>
<div class="heart-left"></div>
<div class="heart-right"></div>
<div class="bullet-center"></div>
</div>
<div class="hand-left">
<div class="h-line-1"></div>
<div class="h-line-2"></div>
<div class="h-line-3"></div>
<div class="h-line-4"></div>
<div class="palm-left"></div>
</div>
<div class="hand-right">
<div class="h-line-1"></div>
<div class="h-line-2"></div>
<div class="h-line-3"></div>
<div class="h-line-4"></div>
<div class="palm-right"></div>
</div>
<div class="left-leg">
<div class="l-line-1"></div>
<div class="l-line-2"></div>
<div class="l-line-3"></div>
<div class="shoe-left"></div>
</div>
<div class="right-leg">
<div class="l-line-1"></div>
<div class="l-line-2"></div>
<div class="l-line-3"></div>
<div class="shoe-right"></div>
</div>
</div>
<!--end of head-->
</div>
</body>
</html>

it is possible playing with css animations, adding css classes and removing them.
function fadeOut() {
var myElement = document.querySelector("#myElement");
myElement.classList.remove('fadeIn');
myElement.classList.add('fadeOut');
}
function fadeIn() {
var myElement = document.querySelector("#myElement");
myElement.classList.remove('fadeOut');
myElement.classList.add('fadeIn');
}
#myElement{
width: 100px;
height: 100px;
background: red;
}
.fadeOut{
-webkit-animation: fadeOut 1.0s forwards;
}
.fadeIn{
-webkit-animation: fadeIn 1.0s forwards;
}
#keyframes fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
#keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
<div id="myElement">
</div>
<button onclick="fadeOut()">
Hide
</button>
<button onclick="fadeIn()">
Show
</button>

Border on all sides of one sided-skewed div

I want to give a border on all sides to a one sided-skewed box, but I am unable to do so.
The css code written for this is
.block{
height: 400px;
width: 100%;
position: relative;
background: yellow;
height: 100px;
width: 100px;
border-top: 2px solid teal;
border-bottom: 2px solid teal;
border-left: 2px solid teal;
}
.block::after{
content: '';
width: 100%;
height: 100%;
position: absolute;
background: inherit;
z-index: -1;
top:0;
right:0;
transform-origin: right bottom ;
transform: skewX(-20deg);
border-right: 2px solid teal;
}
DEMO
Does anyone have a solution for this problem?

All you need to do is play around a bit more with the borders and positioning of the pseudo element. Something like this:
.block {
position: relative;
background: black;
height: 100px;
width: 100px;
border: 2px solid teal;
border-right: none;
}
.block::after{
content: '';
width: 100%;
height: 100%;
position: absolute;
background: inherit;
z-index: -1;
top: -2px;
right: -2px;
transform-origin: right bottom;
transform: skewX(-20deg);
border: 2px solid teal;
}
<div class="block"></div>

How do I write over a triangle-shaped div using CSS?

I'm currently trying to write words over a triangle-shaped div that I created using CSS.
Here:
.triangle-topright {
width: 0;
height: 0;
border-top: 100px solid gray;
border-left: 100px solid transparent;
}
<div class="triangle-topright">view</div>
As you can see, view is misplaced as I want it to be inside the shape. I also want it to rotate so It's nice for the eye. I know that text rotation goes something like this (example):
-moz-transform: rotate(-90deg);
Can I achieve the goal using CSS or do I need to add some JS?
Thanks a lot!

Use pseudo elements
DEMO - 1
.triangle-topright {
width: 100px;
height: 100px;
transform: rotateZ(45deg);
margin: 20px;
position: relative;
z-index: 1;
text-align: center;
line-height: 64px;
}
.triangle-topright:before {
content: '';
z-index: -1;
position: absolute;
top:0;
left: 0;
width: 0;
height: 0;
transform: rotateZ(-45deg);
border-right: 100px solid gray;
border-bottom: 100px solid transparent;
}
<div class="triangle-topright">view</div>
DEMO - 2
.triangle-topright {
width: 100px;
height: 100px;
margin: 20px;
position: relative;
z-index: 1;
text-align: center
}
.triangle-topright:before {
content: '';
z-index: -1;
position: absolute;
top:0;
left: 0;
width: 0;
height: 0;
border-top: 100px solid gray;
border-left: 100px solid transparent;
}
<div class="triangle-topright">view</div>
DEMO - 3
.triangle-topright {
width: 100px;
height: 100px;
transform: rotateZ(90deg);
margin: 20px;
position: relative;
z-index: 1;
text-align: center
}
.triangle-topright:before {
content: '';
z-index: -1;
position: absolute;
top:0;
left: 0;
width: 0;
height: 0;
border-top: 100px solid gray;
border-left: 100px solid transparent;
}
<div class="triangle-topright">view</div>
DEMO - 4
.triangle-topright {
width: 100px;
height: 100px;
transform: rotateZ(90deg);
margin: 20px;
position: relative;
z-index: 1;
text-align: center
}
.triangle-topright:before {
content: '';
z-index: -1;
position: absolute;
top:0;
left: 0;
width: 0;
height: 0;
border-top: 100px solid gray;
border-right: 100px solid transparent;
}
<div class="triangle-topright">view</div>

Some of the answers above achieve the same already. Here is my JSfiddle you can play around with.
http://jsfiddle.net/tmtg1oc8/
.container {
position: relative;
}
.triangle {
position: absolute;
top: 0;
left: 0;
width: 0;
height: 0;
border-top: 100px solid gray;
border-left: 100px solid transparent;
z-index: -1;
}
.content {
padding: 40px;
}
And the html
<div class="container">
<div class="triangle"></div>
<div class="content">hello</div>
</div>

Here's an example of doing it with just CSS.
HTML
<section class="page_block">
<div class="row">
<div class="col-md-1">
<div id="header">
<h1 class="verticaltext">
Vert Text
</h1>
</div>
</div>
<div class="col-md-11">
<p>Column Somethin?</p>
</div>
</div>
</section>
CSS
.page_block {
margin:0px;
padding:10px;
}
#header {
position: relative;
}
.verticaltext {
transform: rotate(45deg);
transform-origin: right, top;
-ms-transform: rotate(45deg);
-ms-transform-origin:right, top;
-webkit-transform: rotate(45deg);
-webkit-transform-origin:right, top;
position: absolute;
color: #ed217c;
}

CSS3 circle with hover

I have a problem creating this effect with CSS3. I know it's possible, but i can't figure out how to do it. We created it with Javascript (https://vimeo.com/104875594). Is there anyone of you who can help with this?
The problem is that the rotation animation will run backwards when you go from left to right in the circle, because your primary position is in the top. We need it to go 360 degrees around, and not only 180 degree.
Thanks.
You can see the code here: http://codepen.io/Seierup/pen/laEiB
<div class="about">
<div class="about-circle">
<div class="box-container">
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div id="indicator-wrapper">
<div class="arrow-Wrapper"></div>
<div id="logo">R</div>
</div>
</div>
</div>
</div>
CSS
.about .about-circle .box-container {
width: 100%;
height: 680px;
background: #F7F7F7;
position: relative;
}
.about .about-circle .box-container .box {
padding-top: 20px;
width: 50%;
height: 50%;
position: relative;
float: left;
border: 1px solid #333;
text-align: center;
}
.about .about-circle #indicator-wrapper {
width: 150px;
height: 150px;
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
margin: -75px 0 0 -75px;
}
.about .about-circle #indicator-wrapper .arrow-Wrapper {
width: 166px;
height: 166px;
border-radius: 50%;
position: relative;
background: #ccc;
margin: -10px;
transition: all 300ms ease;
}
.about .about-circle #indicator-wrapper .arrow-Wrapper:before {
content: "";
position: absolute;
width: 0;
height: 0;
border-bottom: 20px solid #333;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
top: 12px;
left: -4px;
transform: rotateZ(-46deg);
}
.about .about-circle #indicator-wrapper .arrow-Wrapper:after {
content: "";
position: absolute;
background: #333;
width: 80px;
height: 80px;
top: 0;
left: 0;
border-top-left-radius: 200px;
}
.about .about-circle #logo {
width: 120px;
height: 120px;
background: #ffffff;
z-index: 111;
border-radius: 50%;
position: absolute;
top: 12px;
left: 12px;
color: #333;
font-size: 5em;
font-weight: bolder;
text-align: center;
line-height: 120px;
}
.about .about-circle .box-container .box:nth-of-type(1):hover ~ #indicator-wrapper .arrow-Wrapper {
transform: rotateZ(0deg);
}
.about .about-circle .box-container .box:nth-of-type(2):hover ~ #indicator-wrapper .arrow-Wrapper {
transform: rotateZ(90deg);
}
.about .about-circle .box-container .box:nth-of-type(3):hover ~ #indicator-wrapper .arrow-Wrapper {
transform: rotateZ(-90deg);
}
.about .about-circle .box-container .box:nth-of-type(4):hover ~ #indicator-wrapper .arrow-Wrapper {
transform: rotateZ(180deg);
}

I can see that you are new here so please in the future provide some code and jsfiddle we are here to help you not to do the work for you .
Using Pure CSS you can do this in fullscreen
DEMO
STYLE:
*{box-sizing:border-box; padding:0; margin:0;}
[id=overview]{
width:650px;
height:480px;
background: #F7F7F7;
position:relative;
}
[id=overview] img{
width:50px;
height:50px;
position:relative;
background:#333;
}
[id=overview] figcaption{
color: #B6B6B6;
margin-top: 10px;
}
[id=overview] figure{
padding-top:20px;
width:50%;
height:50%;
position:relative;
float:left;
border:1px solid #333;
text-align:center;
}
[id=indicator-wrapper]{
width:150px;
height:150px;
border-radius:50%;
position:absolute;
top:50%;
left:50%;
margin: -75px 0 0 -75px;
}
[class=arrow-Wrapper]{
width: 166px;
height: 166px;
border-radius: 50%;
position: relative;
background: #ccc;
margin:-10px;
transition: all 300ms ease;
}
[class=arrow-Wrapper]:before,[class=arrow-Wrapper]:after{
content:"";
position:absolute;
}
[class=arrow-Wrapper]:before{
width: 0;
height: 0;
border-bottom: 20px solid #333;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
top: 12px;
left: -4px;
transform: rotateZ(-46deg);
}
[class=arrow-Wrapper]:after{
background: #333;
width: 80px;
height: 80px;
top: 0;
left: 0;
border-top-left-radius: 200px;
}
[id=logo]{
width: 120px;
height: 120px;
background: rgb(255, 255, 255);
z-index: 111;
border-radius: 50%;
position: absolute;
top: 12px;
left: 12px;
color: #333;
font-size: 5em;
font-weight: bolder;
text-align: center;
line-height: 120px;
}
[id=overview] figure:nth-of-type(1):hover ~ [id=indicator-wrapper] .arrow-Wrapper{
transform: rotateZ(0deg);
}
[id=overview] figure:nth-of-type(2):hover ~ [id=indicator-wrapper] .arrow-Wrapper{
transform: rotateZ(91deg);
}
[id=overview] figure:nth-of-type(3):hover ~ [id=indicator-wrapper] .arrow-Wrapper{
transform: rotateZ(269deg);
}
[id=overview] figure:nth-of-type(4):hover ~ [id=indicator-wrapper] .arrow-Wrapper{
transform: rotateZ(180deg);
}
MARKUP:
<section id=overview>
<figure>
<img/>
<figcaption>
Some Text
</figcaption>
</figure>
<figure>
<img/>
<figcaption>
Some Text
</figcaption>
</figure>
<figure>
<img/>
<figcaption>
Some Text
</figcaption>
</figure>
<figure>
<img/>
<figcaption>
Some Text
</figcaption>
</figure>
<div id=indicator-wrapper>
<div class=arrow-Wrapper></div>
<div id=logo>R</div>
</div>
</section>

Don't know if this is exactly what you are looking for but it can work as a good reference on how to rotate something 360 degrees around. You can use
transform: rotate(-1turn); //or positive numbers to turn clockwise
Here is the whole example.
http://demosthenes.info/blog/860/Animating-Elements-In-Arcs-Circles-and-Ellipses-With-CSS