I have to center text on top of (or inside of) a triangle, which is bleeding off the right side. Ideally I'd like it to be responsive, but all I could get to work was fixed pixel widths/margins on both the triangle and the content. Like so:
View my Demo
.triangle-down:after {
content: "";
border-style: solid;
position: absolute;
right: 0;
top: 0;
margin-left: -450px;
border-width: 550px 450px 0 450px;
border-color: red transparent transparent transparent;
}
You can see what I'm trying to accomplish better if you look at it wider than 960px. (It will just be a red rectangle below 768px.) I suppose I can work with this if there's no other choice because I can make sure the text inside the triangle will always be roughly the same word count.
But is there a better way to accomplish this layout in a responsive design without having to use fixed pixels?
Use this,
Html code :
<div class="up">
<p>some information text goes here<p>
</div>
Css code :
.up {
width: 0px;
height: 0px;
border-style: inset;
border-width: 0 100px 173.2px 100px;
border-color: transparent transparent #007bff transparent;
float: left;
transform:rotate(360deg);
-ms-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-webkit-transform:rotate(360deg);
-o-transform:rotate(360deg);
}
.up p {
text-align: center;
top: 80px;
left: -47px;
position: relative;
width: 93px;
height: 93px;
margin: 0px;
}
Working Demo is here :
http://jsfiddle.net/markus85/TRuQc/
Related
I want to create a Triangle (preferably using a pure CSS method) that has a two colors. The triangle can be filled to a certain height, this has to be done dynamically on a website as the triangle represents the speed of a device. I want to accomplish the following result:
The yellow part of the triangle needs to be adjustable. (I don't mind althering the CSS using jQuery but the use of images is a no-go). I've managed to create a triangle using the 'border-method' and I've have managed to partially fill a square using a background linear gradient but the combination of both is proving to be quite a challenge.
.arrowLeft{
width: 0;
height: 0;
border-style: solid;
border-width: 15px 0 15px 100px;
border-color: transparent transparent transparent #5f5f5f;
float:left;
}
Does anyone have suggestions on how to solve my problem?
You can create two triangles and position then relatively:
.arrowContainer{
width: 0;
height: 0;
border-style: solid;
border-width: 15px 0 15px 100px;
border-color: transparent transparent transparent #5f5f5f;
position: relative;
}
.arrowContainer .arrowLeft {
width: 0;
height: 0;
border-style: solid;
border-width: 11px 0 12px 80px;
border-color: transparent transparent transparent red;
position: absolute;
right: 0;
top: -11px;
}
<div class="arrowContainer">
<div class="arrowLeft"></div>
</div>
You can create the triangular shape using the border and put the gray and orange div behind it using z-index method: https://jsfiddle.net/62yj9wn5/
html:
<div class="triangle">
<div class="vshape">
</div>
<div class="orange">
<div class="gray">
</div>
</div>
</div>
css:
html, body {background-color: black}
.orange {
background-color: orange;
width: 50px;
height: 120px;
position: relative;
margin: -120px 0 0 0px;
z-index: 1;
}
.gray {
background-color: gray;
width: 50px;
// change the hight dynamically
height: 50px;
}
.vshape{
width:0px;
height: 0px;
border-style: solid;
border-width: 120px 25px 0 25px;
border-color: transparent black transparent black;
position: relative;
z-index: 2;
}
You can easily reuse those classes if multiply the object and rotate it the "other" 3 directions.
Edit: *old question was using images which have since expired; rewritten the same question.
I am needing to progressively taper a line in css to sub-single pixel widths. This is to mimic a design which was handed to me, imagine a single-side border with 2px width progressively thinning along a line until it's nothing.
Any tips are much appreciated!
Here, a quick example (live demo):
HTML:
<nav id="main-nav">
Link 1
Link 2
Link 3
Link 4
Link 5
</nav>
CSS:
#main-nav {
padding: 40px 20px;
width: 150px;
position: relative;
}
#main-nav a {
display: block;
}
#main-nav:after {
content: '';
position: absolute;
right: 0;
top: -10%;
width: 1px;
height: 120%;
background-image: linear-gradient(to top, #666 75%, transparent);
}
#main-nav:before {
content: '';
position: absolute;
left: -10%;
top: 0;
width: 120%;
height: 1px;
background-image: linear-gradient(to right, #666 75%, transparent);
}
You could use this. This is only any use if you a) are happy with CSS only and b) don't want any content in the div.
Think of the border-top and border-left as sort x and y coordinates.
By specifying a width and height of 0px, it allows you to shape the div purely using your borders:
div {
width:0px;
height:0px;
border-left:solid 5px rgba(0,0,0,0);
border-top:solid 50px rgba(0,0,0,0);
border-right:solid 5px blue;
border-bottom:solid 50px blue;
}
Bear in mind that this approach only allows linear tapering.
I'm trying to decrease the height of the triangle made using css to fill in the div "box"
here is the fiddle http://jsfiddle.net/6rp7F/
.triangle-down{
width: 50%;
height: 0;
padding-left: 50%;
padding-top: 50%;
overflow: hidden; }
.triangle-down div {
width: 0;
height: -600px;
margin-left:-500px;
margin-top:-500px;
border-left: 500px solid transparent;
border-right: 500px solid transparent;
border-top: 500px solid #039dd4;
}
here is what i'm expecting to achieve:
Maybe setting border-top to 200px will help you. If not the actual value, you at least see which parameter to tweak.
Updated fiddle (with change made):
http://jsfiddle.net/6rp7F/6/
.triangle-down{
width: 50%;
height: 0;
padding-left: 50%;
padding-top: 50%;
overflow: hidden; }
.triangle-down div {
width: 0;
height: -600px;
margin-left:-500px;
margin-top:-500px;
border-left: 1200px solid transparent;
border-right: 1200px solid transparent;
border-top: 500px solid #039dd4;
This goes off-screen but works!
If you are willing to reduce the overall sizes, then you can see it just as well in that tiny screen but the concept remains the same
See here working perfectly! (I reduced everything by a factor of 10 just to demonstrate that it works)
Changing the margin-top will decrease the height, but will also shrink the triangle. You have to also adjust margin-left, margin-right, padding-left, and padding-right to keep its width the same.
Here is an updated Fiddle
No sure why you need the extra div when this can be done with a pseudo element
JSfiddle Demo
HTML
<div class="triangle-down"></div>
CSS
.triangle-down{
height:1px;
position: relative;
}
.triangle-down:after {
position: absolute;
content:"";
width:0;
height:0;
/* separate out so you can see various properties*/
/* the height of the arrow is dtermined by the top and bottom border widths */
border-width: 200px 500px 200px 500px;
border-style:solid;
border-color:red transparent transparent transparent;
}
You can modify your CSS applied to the div as such:
.triangle-down div {
width: 0px;
margin-left: -300px;
margin-top: -350px;
border-left: 250px solid transparent;
border-right: 250px solid transparent;
border-top: 125px solid #039DD4;
}
You can see this: http://jsfiddle.net/zs6sY/
Hope this helps!!!
I'm trying to add a triangle before a div using css, but it ends up under it.
http://jsfiddle.net/lasseedsvik/LwE7u/
HTML
<div id="container">
1234
<div id="toolbar">
Want silly triangle before this div to left
</div>
</div>
CSS
#container {
width: 500px;
}
#toolbar:before
{
width: 44px;
content: '';
height: 0px;
border-style: solid;
border-width: 0 0 44px 44px;
border-color: transparent transparent blue transparent;
}
#toolbar {
float: right;
width: 350px;
height: 44px;
background: blue;
color: #fff;
}
Is there something missing like display: inline or something?
Use CSS Positioning to set the triangle correctly, in the example below, I am using position: relative; on the parent element, and than use position: absolute; for the :before pseudo..and than use left property which is dobule of the elements width
Always you should wrap the absolute positioned elements with a relative positioned containers, else your element will fly out in the wild.
Demo
#container {
width: 500px;
}
#toolbar:before {
position: absolute;
left: -88px; /* Double the element size */
width: 44px;
content: '';
height: 0px;
border-style: solid;
border-width: 0 0 44px 44px;
border-color: transparent transparent blue transparent;
}
#toolbar {
float: right;
width: 350px;
height: 44px;
background: blue;
color: #fff;
position: relative;
}
Note: Generally when you are creating triangles using CSS, it's a
common practice to set the elements height and width to 0 so if
you want, just tweak them up.
Try putting your div#toolbar in position:relative and positionning your pseudo-element in an absolute manner. Then adjust position and margins to position it correctly.
http://jsfiddle.net/LwE7u/2/
I have found information on how to create various shapes, such as trapezoids and hearts, using only CSS; however, they are solid shapes. Is there a way to create a shape, such as a trapezoid, that is transparent and only displays an outline/border?
By making two shapes and overlapping them, with one larger than the other, it is possible to make it appear to have this effect, but that would only work if the background behind the shape is a solid color, which may not always be the case. Thus the reason for the transparency.
For examples of the CSS shapes: link; look at the triangles, for example.
Thank you.
This is usually done with border tricks, and those are not really helpful for this
You need others techniques for that.
For instance, see this CSS
body {
background: linear-gradient(90deg, lightblue, yellow)
}
.trapezoid {
left: 50px;
top: 50px;
position: absolute;
height: 100px;
width: 500px;
background-color: transparent;
}
.trapezoid:before {
content: '';
width: 57%;
height: 100%;
left: -4%;
position: absolute;
border-color: red;
border-style: solid;
border-width: 3px 0px 3px 3px;
-webkit-transform: skewX(-20deg);
}
.trapezoid:after {
content: '';
width: 59%;
height: 100%;
right: -4%;
position: absolute;
border-color: red;
border-style: solid;
border-width: 3px 3px 3px 0px;
-webkit-transform: skewX(20deg);
}
fiddle
The base element has the background transparent, as per your request. I have set a gradient in the body to verify it.
The you add 2 pseudo elements, that have the borders set (except the inner one), and that are skewed to achieve the trapezoid
You can set background color to transparent
background-color: transparent;
The way that these shapes are typically done in css is through border manipulation. When you have a transparent trapezoid it's just a rectangle with the sides lopped off by a border. Because of this, there is no way to use a uniform border and maintain the same shape.
What's your current code look like? You should just be able to add a border to it and no background color. Example: http://jsfiddle.net/tBBkg/
Overlapping transparent shapes (with border):
#square {
width: 140px;
height: 140px;
border: 2px solid blue;
position: absolute;
}
#circle {
position: absolute;
height: 100px;
width: 100px;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
border: 2px solid pink;
}
Perhaps I'm not understanding the question properly, in which case could you clarify?