As you can see on this link there is en block with a little point on the left side
I was wondering if there is not just a class to make a block with a little point on the left. Without using css? just like class="img-circle" for example where it makes it round.
this pointer
HTML
<div class="triangle">here we talk!!</div>
CSS:
.triangle{
position: relative;
width: 100px;
height: 100px;
color: white;
background-color: rgba(0,0,0,.8);
}
.triangle:after{
position: absolute;
left:-10px;
top: 18px;
content: '';
width: 0;
height: 0;
border-right: solid 10px rgba(0,0,0,.8);
border-bottom: solid 10px transparent;
border-top: solid 10px transparent;
}
Explain:
in the div you create the square in css I define it...
in :after I defined the triangle
If you want to change the background color you have to change both of them
Related
How can I design this triangular corner marked with yellow color on top side of the inside div?
Make a triangle then position that by position: absolute. more explanation in code:
.box {
width: 200px;
height: 200px;
background-color: white;
border: 12px solid #aaa;
}
.triangle-left {
width: 0; /* this five code lines for making a triangle */
height: 0;
border-top: 8px solid transparent;
border-right: 8px solid white;
border-bottom: 8px solid transparent;
position: absolute; /* this three code line for positioning of triangle */
top: 60px;
left: 10px;
}
<div class="box"></div>
<div class="triangle-left"></div>
See this for how making a triangle: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_shapes_triangle-left
try this one!
anything you want is here,
but first try to make a container then copy the code! https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_shapes_triangle-left
I am developing a site and almost the only thing that's left is a slide number indicator. The problem can be viewed in this link:
URL:
http://parimpex.sem.lv/logistics-insurance/
VirusTotal:
https://www.virustotal.com/#/url/f270075d5d8e26607cd6f06b49459e0c99a6a6c09369ffa2f77d8e23ee5d178f/detection
The current slide indicator looks like this:
https://i.imgur.com/HkCUXta.png
The end result is supposed to look like this: https://i.imgur.com/CfdZtOS.png
I have tried using multiple circular box-borders, but that didn't do it.
The white part of the indicator is done, but there has to be a transparent space, and then an orange border.
Please guide!
Your solutions is here:
<div class="circle"></div>
and CSS:
.circle {
display: inline-block;
border-radius: 10px;
width: 10px;
height: 10px;
border: 5px solid #000;
background-color: #fff;
box-shadow: 0px 0px 1px 2px #fff;
}
https://jsfiddle.net/9dbza1px/1/
Add this to your css
.global_slider .flickity-page-dots .dot {
position: relative;
}
.global_slider .flickity-page-dots .dot.is-selected:before {
content: '';
width: 25px;
height: 25px;
position: absolute;
left: -5px;
top: -5px;
border-radius: 50%;
border: 1px solid yellow;
}
I'm trying to mockup this design:
But, I can't render the red border correctly. I tried with the obvious solution:
border: 1px solid #939393;
border-left: 4px solid red;
But It's affected by the top and bottom borders, leaving the red stripe with diagonal corners, as you can see in this fiddle:
http://jsfiddle.net/anp0e03k/
Is there any way correct way to fix this?
The only thing that I can think is to add a div inside with red background and negative margins on top and bottom, but it seems to be an overkill and would love to find something that doesn't ruins the html semantic.
Apply the left border to a :before pseudo element of the div and remove the divs left border.
Compatibility: All modern browsers and IE8 +
Give the :before
height: 100% to span the entire height of your div
margin-top: -1px to overlap the top border
padding-bottom: 2px to overlap the bottom border
Then use either
position: absolute on the :before with position: relative on the div like this example:
body {
background-color: #c2c2c2;
}
div {
margin: 50px;
background-color: #FFF;
border: 1px solid #939393;
height: 50px;
width: 200px;
border-left: none;
position: relative;
}
div:before {
content: '';
display: block;
border-left: 4px solid red;
height: 100%;
margin-top: -1px;
padding-bottom: 2px;
position: absolute;
top: 0;
left: 0;
}
<div>
</div>
or
display: inline-block for the :before like this example:
Note: You will probably want to use vertical-align: top / middle / bottom for the :before. This example uses the value top.
body {
background-color: #c2c2c2;
}
div {
margin: 50px;
background-color: #FFF;
border: 1px solid #939393;
height: 50px;
width: 200px;
border-left: none;
}
div:before {
content: '';
display: inline-block;
border-left: 4px solid red;
height: 100%;
margin-top: -1px;
padding-bottom: 2px;
vertical-align: top;
}
<div>
There is text in this
</div>
Final result
I'm trying to do something like this:
The boxes have shadows and the background of the corners must be transparent because they are over an image (unpredictable background).
After searching Google, I found solutions using pseudo selectors :before and :after as well as solutions using extra markup, but all of them use a fixed colour background. These were my results:
I'm trying to use box-shadows and only a small image for the corner, instead of a large complete background.
How I can do this?
Use both the pseudo-elements, one for the upper box, the other for the white triangle:
h1 {
background: #F0B032;
box-shadow: 1px 1px 4px #362708;
line-height: 30px;
position: relative;
}
h1:before, h1:after {
content: '';
position: absolute;
left: 100%;
}
h1:before {
background: #F0B032;
box-shadow: 1px 1px 2px #362708;
width: 15px;
height: 16px;
top: 0;
}
h1:after {
border: 7px solid transparent;
border-left-color: #fff;
border-top-color: #fff;
bottom: 0;
}
Here's the fiddle: http://jsfiddle.net/Kjp6v/
This does not add a shadow under the fold, but looks realistic enough.
I want to create an upward and downward facing arrow with css like the following: http://apps.eky.hk/css-triangle-generator/
However, instead of a solid color, I want to set it up so the inside is white and there is just a border around the triangle. (So the triangle would be multi-colored, one color on the inside and a different colored border).
Is this possible, and if so, how can it be done?
To create triangles with only CSS we use a zero width/height element with borders:
.arrow-up {
width : 0;
height : 0;
border-left : 50px solid transparent;
border-right : 50px solid transparent;
border-bottom : 50px solid black;
}
Since we are using borders to create the arrow, we can't just give it a border, but we can overlay one arrow on top of a slightly larger arrow to make the appearance of a border:
HTML --
<div class="top"></div>
<div class="bottom"></div>
CSS --
.top {
position : absolute;
top : 6px;
left : 10px;
width : 0;
height : 0;
z-index : 100;
border-left : 50px solid transparent;
border-right : 50px solid transparent;
border-bottom : 50px solid black;
}
.bottom {
position : absolute;
width : 0;
height : 0;
z-index : 99;
border-left : 60px solid transparent;
border-right : 60px solid transparent;
border-bottom : 60px solid red;
}
Here is a demo: http://jsfiddle.net/jasper/qnmpb/1/
Update
You can then put both of the triangle DIV elements inside a container and move that container however you want:
HTML --
<div id="container">
<div class="top"></div>
<div class="bottom"></div>
</div>
CSS --
#container {
position : relative;
top : 25px;
left : 25px;
}
Here is a demo: http://jsfiddle.net/jasper/qnmpb/3/
EDIT (2014):
I just came back to this answer and noticed that separate HTML elements are not necessary to create your double-triangle. You can use pseudo-elements, :before and :after. I.e. replace the .top selector with something like .my-element-that-needs-a-triangle:before and the .bottom selector with something like .my-element-that-needs-a-triangle:after.
I think you could get a good idea of what to do by checking out this tutorial on pure css thought bubbles. It's doing what you're looking for.
http://www.sitepoint.com/pure-css3-speech-bubbles/
Depending on how you're using it, you can make a triangle, with a border and even box shadow, without the triangle border hack, using CSS transform: rotate(). See my answer here: https://stackoverflow.com/a/8867645/918414
If you want to create a triangle with borders (or box shadow look-alike) in pure CSS, you should use pseudo-elements :before and :after.
In my example, I added display:inline-block; to the element .arrow-dropdown to be able to create some kind of dropdown menu with a drop shadow. It is followed by .arrow-only which is a a basic triangle with a red border.
body {
margin: 10px;
background: #1670c4;
}
.text {
display: inline-block;
font-size: 15px;
color: #fff;
text-shadow: 1px 1px 2px rgba(0,0,0,0.4);
cursor: default;
}
.arrow-dropdown {
display: inline-block;
position: relative;
vertical-align: middle;
margin: 1px 0 0 8px;
width: 8px;
height: 7px;
}
.arrow-dropdown:after {
content: '';
position: absolute;
border-style: solid;
border-width: 7px 4px 0;
border-color: #fff transparent transparent transparent;
display: block;
width: 0;
z-index: 1;
}
.arrow-dropdown:before {
content: '';
position: absolute;
border-style: solid;
border-width: 8px 5px 0;
border-color: rgba(0,0,0,0.3) transparent transparent transparent;
display: block;
width: 0;
z-index: 0;
}
.arrow-only {
position: relative;
vertical-align: middle;
margin: 10px 0 0 8px;
width: 8px;
height: 7px;
}
.arrow-only:after {
content: '';
position: absolute;
border-style: solid;
border-width: 12px 9px 0;
border-color: #fff transparent transparent transparent;
display: block;
width: 0;
z-index: 1;
}
.arrow-only:before {
content: '';
position: absolute;
border-style: solid;
border-width: 15px 11px 0;
border-color: #f00 transparent transparent transparent;
display: block;
width: 0;
z-index: 0;
margin:-1px 0 0 -2px;
}
<div class="text">
Dropdown text
</div><div class="arrow-dropdown"></div>
<div class="arrow-only"></div>