I am trying to create a border like effect for the triangle. I have tried giving it a border, box shadow, neither works. Then if you do put another triangle div inside of it the outer triangle just becomes larger.
#triangle {
border-style: solid;
border-width: 25px 50px 25px 0;
border-color: transparent #000 transparent transparent;
}
Try using a pseudo-element like :after.
Here you go!
#triangle {
border-style: solid;
border-width: 25px 50px 25px 0;
border-color: transparent #000 transparent transparent;
width: 0;
position: relative;
}
#triangle:after {
content: ' ';
position: absolute;
border-style: solid;
border-width: 13px 25px 13px 0;
border-color: transparent red transparent transparent;
width: 0;
top: -13px;
left: 17px;
}
<div id="triangle">
</div>
Related
Is it able to create a button with transparent background and a dotted border, with a custom shape?
I'm able now to do this with a background color, but when I try to to fill the inner without any color, nothing works as expected.
body{
background: #999
}
button {
height: 50px;
width: 250px;
border: dotted 1px #FFF;
border-bottom: none;
background: none;
position: relative;
}
button:after,
button:before {
content: '';
display: block;
position: absolute;
top: 100%;
width: 0;
height: 0;
border-style: solid;
}
button:after {
border-color: #fff transparent transparent transparent;
border-width: 1px 125px 0 0;
right: 1px
}
button:before {
border-color: transparent transparent #fff transparent;
border-width: 0 125px 1px 0;
left: 0
}
<body>
<button></button>
</body>
I am not so sure about a button, but you can certainly create shapes out of divs.
What you are looking for is a play with borders to create shapes.
#triangle{
width: 0;
height: 0;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
border-bottom: 40px solid green;
}
<div id="triangle"></div>
As you can see, I created a triangle with just the borders, the trick is to understand the borders of a div. They are not straight, their ends are wedge shaped.
I think this is a good starting point for you.
I'm creating some custom shapes using CSS I want to draw an arrow whose pointer is on the right side and is aligned left to the div I actually made an arrow which pointer was to the left but I'm having difficulty in making an arrow whose pointer is on right side.
Here's a picture of how I want it
arrow
Here's my html code
<div class="arrow">
<img style="width:70%" src="https://i.imgsafe.org/a842cd10d7.png" class="img-responsive">
</div>
css
.arrow {
position: relative;
}
.arrow::after {
position: absolute;
content: '';
width: 0;
height: 0;
left: 0;
border-style: solid;
border-width: 18px 30px 18px 0;
border-color: transparent #fff transparent transparent;
bottom: 45px;
}
FIDDLE
You just needed to swap the left/right values of your border rules to make the arrow face the opposite direction.
Change this:
border-width: 18px 30px 18px 0;
border-color: transparent #fff transparent transparent;
To this:
border-width: 18px 0 18px 30px;
border-color: transparent transparent transparent #fff;
And then to match your example image, I changed the 30px side to also be 18px, forming an equilateral triangle.
.arrow {
position: relative;
}
.arrow::after {
position: absolute;
content: '';
width: 0;
height: 0;
left: 0;
border-style: solid;
border-width: 18px 0 18px 18px;
border-color: transparent transparent transparent #fff;
bottom: 45px;
}
<div class="arrow">
<img style="width:70%" src="https://i.imgsafe.org/a842cd10d7.png" class="img-responsive">
</div>
Take a look here I did it (and made arrow in red so it will be easier to see):
.arrow {
position: relative;
padding: 20px;
}
.arrow::after {
position: absolute;
z-index: 200;
content: '';
width: 0;
height: 0;
left: 20px;
border-style: solid;
border-width: 22px 0 22px 17px;
border-color: transparent transparent transparent red;
bottom: 62px;
}
I am looking to create a tunnel-like div which has inverted circle borders
As you can see it has an 'expanding tunnel effect' from left to right. Ideally the checkered background is transparent but if that is impossible I can maybe make it work with a solid background color.
Can anyone help me out creating this css3 shape? Hopefully with a jsfiddle that I can play with?
Thank you!
This can be created using a :before and :after pseudo element:
The background colour is provided with the box-shadow colour, allowing the top and bottom of the shape to be transparent
The curve is created with the border-radius like so:
(the red area is transparent)
Complete Example
div {
height: 300px;
width: 200px;
position: relative;
overflow: hidden;
}
div:before {
top: -60px;
border-bottom: solid #EEE;
border-right: solid #EEE;
border-radius: 0 0 60% 0;
box-shadow: 50px 10px 0 60px #F90;
}
div:after {
bottom: -60px;
box-shadow: 50px 10px 0 60px #F90;
border-radius: 0 60% 0 0;
border-top: solid #EEE;
border-right: solid #EEE;
}
div:before,
div:after {
content: '';
position: absolute;
width: 100%;
height: 160px;
right: 0;
border-width: 3px;
}
<div></div>
How can I make this bottom div into a triangle like shown in the image? I tried the code below but the edges don't come into the center.
border-radius: 0 0px 100px 100px;
width: 0px;
height: 0px;
border-style: solid;
border-width: 100px 100px 0 100px;
border-color: #007bff transparent transparent transparent;
Try this:
HTML
<div class="triangle">
<!--Div content here -->
</div>
CSS
.triangle {
width: 0px;
height: 0px;
border-style: solid;
border-width: 60px 175px 0 175px;
border-color: #007bff transparent transparent transparent;
}
See DEMO here:
TRIANGLE DOWN
http://jsfiddle.net/EdZ32/6/
TRIANGLE UP
http://jsfiddle.net/EdZ32/5/
Triangle Generator here:
http://html-generator.weebly.com/css-triangle-generator.html
use the CSS below to achieve the triangle styling.
.arrow-down {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #f00;
}
I have want to have a background-image one frame, but i need to make the image lighter. I have tried using opacity, but then a background image from another frame shines throungh. I also have some text in the same frame, and i don't want that text to get lighter.
I write in CSS3, here is my code;
.frameContent
{
background-image: url(/image/and_02.jpg);
background-size: 100%;
vertical-align: top;
border-left: #FFFFFF 20px solid;
border-right: #FFFFFF 20px solid;
border-top: #FFFFFF 15px solid;
padding: 25px 10px 10px 10px;
height:100%;
box-shadow: 2px 2px 2px;
}
As Bappi Das said, there is no background-opacity property. But background-image can take multiple parameters. We can use this to add some white in front of the image. Unfortunately, we cannot simply specify a color, but we can specify a gradient. So if we specify a gradient with two times the same color and make that color slightly transparent using rgba, we can alter the color of an image.
background-image: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)),
url("/image/and_02.jpg");
Do this to the container element:
yourImageContainer:after {
content: "";
position: fixed;
top: 0; bottom: 0; left: 0; right: 0;
background: hsla(180,0%,50%,0.25);
pointer-events: none;
}
this will put a darker/lighter mask depending on what color you chose.
Add following css to your class ()
.frameContent
{
background-image: url(/image/and_02.jpg);
background-size: 100%;
vertical-align: top;
border-left: #FFFFFF 20px solid;
border-right: #FFFFFF 20px solid;
border-top: #FFFFFF 15px solid;
padding: 25px 10px 10px 10px;
height:100%;
box-shadow: 2px 2px 2px;
opacity: 0.2;
filter: alpha(opacity=20);
}
and check if it works for you. You can also check following links for your reference
http://css-tricks.com/snippets/css/transparent-background-images/
http://nicolasgallagher.com/css-background-image-hacks/demo/opacity.html
How about create nested elements?
.frame = Plain white;
.frameContent = your partially transparent Background
<div class="frame"><div class="frameContent">My Content here</div></div>
There is no CSS property background-opacity, but you can achieve it by inserting a pseudo element (::after) behind it.
.frameContent{
position:relative;
border-left: #FFFFFF 20px solid;
border-right: #FFFFFF 20px solid;
border-top: #FFFFFF 15px solid;
padding: 25px 10px 10px 10px;
height:100%;
box-shadow: 2px 2px 2px;
}
.frameContent::after{
content: "";
background: url(/image/and_02.jpg);
background-size:cover;
opacity: 0.5;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
}