Ad
How To Create Arrow Down/up In Css
How can I create a arrow point down /up in css?
I tried to build it from div:
.triangle_down {
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-top: 15px solid #2f2f2f;
font-size: 0;
line-height: 0;
float: left;
}
But i tried to build something like this:
Any suggestions?
Ad
Answer
My proposal is:
.triangle_down {
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-top: 15px solid #2f2f2f;
font-size: 0;
line-height: 0;
float: left;
}
.triangle_down1 {
position: relative;
top: -5px;
content: "";
display: inline-block;
width: 15px;
height: 15px;
border-right: 0.2em solid black;
border-top: 0.2em solid black;
transform: rotate(135deg);
margin-right: 0.5em;
margin-left: 1.0em;
}
.triangle_up1 {
position: relative;
top: -5px;
content: "";
display: inline-block;
width: 15px;
height: 15px;
border-right: 0.2em solid black;
border-top: 0.2em solid black;
transform: rotate(-45deg);
margin-right: 0.5em;
margin-left: 1.0em;
}
<div id="dialog1" class="triangle_down"></div>
<div id="dialog2" class="triangle_down1"></div>
<div id="dialog3" class="triangle_up1"></div>
Ad
source: stackoverflow.com
Related Questions
- → How to update data attribute on Ajax complete
- → October CMS - Radio Button Ajax Click Twice in a Row Causes Content to disappear
- → Octobercms Component Unique id (Twig & Javascript)
- → Passing a JS var from AJAX response to Twig
- → Laravel {!! Form::open() !!} doesn't work within AngularJS
- → DropzoneJS & Laravel - Output form validation errors
- → Import statement and Babel
- → Uncaught TypeError: Cannot read property '__SECRET_DOM_DO_NOT_USE_OR_YOU_WILL_BE_FIRED' of undefined
- → React-router: Passing props to children
- → ListView.DataSource looping data for React Native
- → Can't test submit handler in React component
- → React + Flux - How to avoid global variable
- → Webpack, React & Babel, not rendering DOM
Ad