This tutorial relates to making arrows on elements such as comment boxes or error/alert messages, so if you're not here for that, I suggest you Google for it, I'm not coding actual arrows.
Many people use a hacky solution of messing with borders to make arrows but I find that too complicated and it takes too long, the method I'm about to use is hacky but much simpler.
The above code gives the following output:
How does this work?
The effect is achieved in the :after pseudo element. It 'creates' a new element, in this case we created a 16x16px box matching the background colour of the alert, the we rotate the box on a 45 degree axis to give it the effect of an arrow.
Hope this helps if you use it...
Many people use a hacky solution of messing with borders to make arrows but I find that too complicated and it takes too long, the method I'm about to use is hacky but much simpler.
PHP:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
[type="text"] {
padding: 8px 12px;
}
.error{
font: .75em Arial, sans-serif;
padding: 8px 12px;
background-color: #ce5e5e;
border-radius: 4px;
color: #fff;
float: left;
position: absolute;
z-index: 4;
box-shadow: 0 0 8px 1px black;
}
.error:after {
display: block;
content: "";
width: 16px;
height: 16px;
background-color: #ce5e5e;
position: absolute;
top: -8px;
left: 15px;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
</style>
</head>
<body>
<input type="text" placeholder="Enter your name">
<div class="error">You cannot leave your name blank</div>
</body>
</html>
The above code gives the following output:
How does this work?
The effect is achieved in the :after pseudo element. It 'creates' a new element, in this case we created a 16x16px box matching the background colour of the alert, the we rotate the box on a 45 degree axis to give it the effect of an arrow.
Hope this helps if you use it...