Menu
Forums
All threads
Latest threads
New posts
Trending threads
New posts
Search forums
Trending
What's new
New posts
New profile posts
Latest activity
Members
Current visitors
New profile posts
Search profile posts
Upgrades
Log in
Register
What's new
Search
Search
Search titles only
By:
All threads
Latest threads
New posts
Trending threads
New posts
Search forums
Menu
Log in
Register
Navigation
Install the app
Install
More options
Contact us
Close Menu
Forums
Software Development
Programming
Tutorials
[CSS] Easy way to make an arrow
JavaScript is disabled. For a better experience, please enable JavaScript in your browser before proceeding.
You are using an out of date browser. It may not display this or other websites correctly.
You should upgrade or use an
alternative browser
.
Reply to thread
Message
<blockquote data-quote="Markshall" data-source="post: 320012" data-attributes="member: 1872"><p>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.</p><p></p><p>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.</p><p></p><p>[PHP]</p><p><!DOCTYPE html></p><p><html lang="en"></p><p> <head></p><p> <meta charset="UTF-8"></p><p> <title>Document</title></p><p> </p><p> <style></p><p> [type="text"] {</p><p> padding: 8px 12px;</p><p> }</p><p> </p><p> .error{</p><p> font: .75em Arial, sans-serif;</p><p> padding: 8px 12px;</p><p> background-color: #ce5e5e;</p><p> border-radius: 4px;</p><p> color: #fff;</p><p> float: left;</p><p> position: absolute;</p><p> z-index: 4;</p><p> box-shadow: 0 0 8px 1px black;</p><p> }</p><p> </p><p> .error:after {</p><p> display: block;</p><p> content: "";</p><p> width: 16px;</p><p> height: 16px;</p><p> background-color: #ce5e5e;</p><p> position: absolute;</p><p> top: -8px;</p><p> left: 15px;</p><p> transform: rotate(45deg);</p><p> -webkit-transform: rotate(45deg);</p><p> }</p><p> </style></p><p> </head></p><p> </p><p> <body></p><p> <input type="text" placeholder="Enter your name"></p><p> <div class="error">You cannot leave your name blank</div></p><p> </body></p><p></html>[/PHP]</p><p></p><p>The above code gives the following output:</p><p></p><p><img src="http://i.imgur.com/KzLGg85.png" alt="" class="fr-fic fr-dii fr-draggable " style="" /></p><p></p><p><strong>How does this work?</strong></p><p>The effect is achieved in the <span style="font-family: 'Courier New'">:after</span> 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.</p><p></p><p>Hope this helps if you use it...</p></blockquote><p></p>
[QUOTE="Markshall, post: 320012, member: 1872"] 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. [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>[/PHP] The above code gives the following output: [IMG]http://i.imgur.com/KzLGg85.png[/IMG] [b]How does this work?[/b] The effect is achieved in the [FONT=Courier New]:after[/FONT] 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... [/QUOTE]
Insert quotes…
Verification
Post reply
Forums
Software Development
Programming
Tutorials
[CSS] Easy way to make an arrow
Top