There many tutorials to make corner ribbon, and of all tutorial using transform/rotate 45 deg. It makes content inside div (font) also rotate. I don't want it. I want to make like below picture, font/symbol still stand-up.
I try to make a triangle background, but I can't make like what I want.
#Dedi Ananto : Please take note of the following code:
<div class="arrow-right"></div>
.arrow-right {
width: 0px;
height: 0px;
border-top: 0px solid transparent;
border-bottom: 70px solid transparent;
border-left: 60px solid red;
}
Hope this Helps..
Regards,
Karan
Related
I am wanting to create inline-block divs in CSS that have diagonal sides by having a top width of lets say 200px and a bottom width of 100px. Is this possible? If so, how? Or what would anyone suggest as a better alternative?
The box model of HTML implies that divs are always rectangles. However you can get a very decent result using some techniques. The simplest one is too use css to tint just the part of your background needed. You set the width to the wider side and then use the border-left right and bottom properties to adjust the shape. For example:
.myDiv {
border-bottom: 50px solid #555;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
height: 0;
width: 125px;
}
You can see it working here: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_shapes_trapezoid
The w3school also have a very interesting page with a lot of shapes you can create with css. Check it here: https://www.w3schools.com/howto/howto_css_shapes.asp
Are you looking to create a trapezoid?
.trapezoid {
border-top: 100px solid red;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
height: 0;
width: 100px;
}
.trapezoid {
border-top: 100px solid red;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
height: 0;
width: 100px;
}
<div class="trapezoid">
</div>
I just want to know how can I add a border to the bottom of my container like this:
http://awesomescreenshot.com/0a551tq923
Assuming the border is white there and the container is above that.
I know it requires some minor CSS but can not figure that out.
Thank you.
I created a JSFiddle to show an example of what you could do. All using CSS.
I could see multiple ways of accomplishing this using the basic example I provided.
The css used for the bottom slant:
#bottom {
width: 0;
height: 0;
border-top: 20px solid black;
border-left: 500px solid transparent;
}
Edit:
Here is another example. More close to the website.
Also the website is using parallax. So it's going to be a little different then what I threw together.
you can do like :
#container {
background:url('path to image which needed as border') no-repeat center bottom;
}
With CSS3 you can do the same of the image that you like, try with:
#container {
border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px; /* firefox */
-webkit-border-radius: 10px; /* safari, chrome */
}
And if you want even the shadow try with:
-webkit-box-shadow: 0 5px 10px #303030;
Is there a way to implement this custom border on css?i tried with border-radius but i did not find a solution until now...the black part represents how I wish the border to look like
My problem is that I want a straight line from the bottom-corner to the rows.
Guaranteed to work in all browsers? Use an image for it. Doing it via CSS, quick and filthy, you can do stuff like this, no idea about browser compatibility
.arrow-left {
border-left: 50px solid transparent;
border-top: 20px solid black;
}
.arrow-right {
border-right: 50px solid transparent;
border-top: 20px solid black;
}
http://jsfiddle.net/2Z2ka/1/
you can use some thing like this:
DEMO
div{
width: 300px;
height: 50px;
background: #333;
border-radius: 3px;
border-bottom-right-radius: 100px 50px;
border-bottom-left-radius: 100px 50px;
}
You may want to try different approach, which is a background for the beginning and ending of your DIV. That would be triangle saved in gif/png format.
Also if the div has fixed size, it can very well be single image file (also gif/png as it has to be transparent).
This way you make sure all browsers will support your solution which is unlikely with CSS tricks. (I mostly worry about IE 7.0/8.0)
I want to create a partial circular border around an element using pure css. I've been able to achieve the effect to a certain extent in this: http://jsfiddle.net/5MZMj/202/
However, this removes 25% or the border, How do I remove just 5% or say 20% ?
Also, how do I rotate the border (without rotating the content inside)?
Code in jsfiddle:
HTML:
<div class="one">
<div class="two">4.5</div>
</div>
CSS:
.two {
font-size: 24px;
display:inline;
padding-bottom:5px;
}
.one {
padding: 10px;
border: 1px solid green;
border-radius: 25px;
border-top-color: transparent;
width:30px;
margin-left: 10px;
}
Edit: image to give an idea of the effect I'm trying to achieve: http://imgur.com/JU78ICT
Edit2: sorry, I just realized I had linked the wrong jsfiddle, correct one is: http://jsfiddle.net/5MZMj/202/
I'm not sure if this is what you're looking for, but a simple hack is to put the upper right circle behind your main div:
#f {
z-index: -1;
}
http://jsfiddle.net/5MZMj/199/
Partially solved using psuedo elements, see: http://jsfiddle.net/5MZMj/205/
:after {
display: inline-block;
content: "";
border-left: 10px solid transparent;
border-top: 25px solid #fff;
border-right: 10px solid transparent;
border-top-color: #fff;
position: absolute;
margin-top:-42px;
margin-left: -5px;
}
Editing margin-top, margin-left and border-right changes the amount of arc to be removed.
[There ought to be a better way though, someway in which editing a single variable changes the amout of arc to be removed]
I didn't get you all, but may be this is the answer.
#f
{
right:-93px;
}
http://jsfiddle.net/7zDNK/
You can specify the radius for each corner if that what you mean:
border-radius: 5px 10px 15px 20px;
Starting with the top-left corner and going clockwise.
If you want to take less of a chunk out of the corner, you need to adjust the positioning of the circle.
http://jsfiddle.net/5MZMj/201/
#f {
right: -85px;
top: -85px;
}
My border is not showing up around my image, I'm not quite sure what the issue could be. I just need a small black border around the photo. My website is http://www.welovetile.com. I can't figure out what the problem could be. Thanks.
CSS:
#kitchen {
height:250px;
width:346px;
background-image:url(images/kitchenbg.jpg);
}
#kitchen img
{
top: 50%;
left: 50%;
width: 316px;
height: 228px;
margin-top:11px;
margin-left:15px;
border-color:#000000;
border-width:thin;
}
HTML:
<div id="kitchen">
<img src="images/kitchen.jpg" alt="Kitchen Tile Job"/>
</div>
Borders have three main pieces: a width, a style, and a color; the style is required for any of the others to work.
Try adding the style:
border-style: solid;
Also, you can specify all these in the same line of css:
border: thin solid black;
Updated
As pointed out by Wesley, border-style is the only required one.
From http://www.w3schools.com/css/css_border.asp :
None of the border properties will have ANY effect unless the border-style property is set!
You're missing:
border-style: solid;
You can put border width/style/color in one row like this:
Border: 1px solid black;
try this:
border: 1px solid #F4F1E8;
box-shadow: 1px 1px 3px #4C4843;
Add a border style property as well, for example border-style: solid;.