Responsive obtuse-angled triangle css - javascript

I've been searching for answers about this.
Is it possible to make an responsive obtuse-angled triangle in html/css or JS?
I would like to make a triangle such as this:
obtuse-angled triangle example :
I do know how to make triangles with the border trick, but i can't figure out how to make the otuse-angled one.
I hope you guys can help and have a smart trick.
Best regards
Joachim

Here is a simply way using linear-gradient:
body {
margin:0;
height:100px;
background:linear-gradient(to top right,transparent 50%, blue 51%) 0 0/20% 100% no-repeat,
linear-gradient(to top left,transparent 50%, blue 51%) 100% 0/calc(80% + 1px) 100% no-repeat;
}

Use borders of different widths
div {
margin: 1em auto;
height: 0;
width: 0;
border-color: red transparent transparent transparent;
border-style: solid;
border-width: 250px 250px 0px 50px;
}
<div></div>

Related

Css background arrow percentage width

I have a box with a "cool" looking triangle background (covers 50% of the box). I solved for any fixed width but forgot that on mobile the width is not fixed anymore, making my solutions to fail on mobile devices.
To create the background, I use border technique setting each side of the border to half of the height/width, but, borders cant be in percentage (%).
How can I possibly achieve that?
Below is my code:
.outer {
width: 100%;
height: 300px
}
.background-triangle {
bottom: 0;
right: 0;
height: 0;
width: 0;
border-right: 250px solid rgba(0,0,0,.1); /* half width */
border-bottom: 150px solid rgba(0,0,0,.1);/*half height*/
border-left: 250px solid transparent;/*half width*/
border-top: 150px solid transparent; /* half height*/
}
.box-color {
position: relative;
background-color: #6699cc;
}
and a very straightforward html
<div class="outer">
<a href="/#">
<div class="box-color" style="">
<div class="background-triangle"></div>
</div>
</a>
</div>
I would prefer a non-javascript option if possbile. I guess I could set the width when the window size changes.
Edit: What I want to achieve is to make the black background triangle stretch the full width of its containing element. Try resizing the jsfiddle window and see how the triangle has a fixed width. It does not follow the containing "blueish" box width change. I hope this clears the question up.
And a jsfiddle link
Use linear background instead of traditional triangle generation technique. Check this solution at this updated jsFiddle:
https://jsfiddle.net/ashekthegreat/kmmg9L01/6/
.background-triangle {
width: 100%;
height: 100%;
left: 0px;
top: 0px;
background: linear-gradient(to right bottom, transparent 50%, rgba(0, 0, 0, .1) 50%)
}

How to make all images look same

I am new to web developing, and forgive me if this is very naive question but I am facing an issue where I have a row which has 7 images basically certification that My company has. They all are different size and color and doesnt look good together.
I am trying to make them all look same size and responsive.
So far I have used:
clip: rect(0px,60px,200px,0px);
but this just cuts the images, so I need some other solution which can fix this
My first image is 250*100px whereas other is 250*250px likewise I have 7 images all different size so I have set max-width:250px; height:auto; and this is how it look now:
CSS:
.ribbon img{
height:150px;
margin: 2px 2px 2px 2px;
}
.ribbon img:hover{
border: solid 1px black;
-moz-box-shadow: 0 0 10px #ccc;
-webkit-box-shadow: 0 0 10px #ccc;
box-shadow: 0 0 10px black;
}
.ribbon{
vertical-align:center;
}
What I am trying to get is those first to image should come in center I have tried vertical-align:middle but doesn't work and the PCGS image is full size 250*250 so it is the problem
You could try img { height: 250px; } to makes all img with the same height, browser will handle the width onscale if you leave the width not set
Edit 1 -
If you want they have the same width, you may replace the height with width that setup the value you want, please try this example, https://jsfiddle.net/e7wv86pc/
img { width: 14%; }
You can also use css property background-size set to cover, and set the images using css background-image property like this:
.image {
width: 250px;
height: 250px;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
.i1 {
background-image: url("http://ia.media-imdb.com/images/M/MV5BMjE4NDMwMzc4Ml5BMl5BanBnXkFtZTcwMDg4Nzg4Mg##._V1_UY317_CR6,0,214,317_AL_.jpg");
}
.i2 {
background-image: url("http://feelgrafix.com/data_images/out/20/932835-gerard-butler.jpg");
}
<div class="image i1"></div>
<div class="image i2"></div>

How do I prevent sliced images in the CSS background from sitting on each other?

I have a background image I have sliced in Photoshop and set in a CSS class called".bd-image". I reference this class in the body element because I want it to be the background image for the whole page. I want each image to be 100% and not repeat. The problem is the images are on top of one another and not spreading out on the page. I changed the width and height from the absolute value to 100%, but no success. I need proper coding to set the images.
Does anyone know how to layer sliced images so they go down the page in the correct position and do not overlap? Or does anyone know of a sliced image background I can reference to get the correct coding?
.bd-image{
background:
url(images/orange-dark_01.jpg) 100% 46px no-repeat,
url(images/orange-dark_02.jpg) 100% 60px no-repeat,
.........
url(images/orange-dark_24.jpg) 100% 46px no-repeat;
}
</style>
</head>
<body class="bd-image" onload="StartTimers();" onmousemove="ResetTimers();">
When multiple images are added as background to an element, CSS would by default place them all in the same starting point. So, they will overlap one another. The background-position property should be used to set each image at their correct place. The value should be set such that the current image is offset from the previous image in X and/or Y directions.
In your case, since all images have to be 100% in width they can all start at X position = 0, only the Y position needs to be set. The Y position of second image would be height of first image, that of the 3rd image would be height of 1st + 2nd image and so on.
div {
/* as short-hand property */
background: url(http://lorempixel.com/400/100/nature/1) 0px 0px / 100% 46px no-repeat,
url(http://lorempixel.com/400/100/nature/2) 0px 46px / 100% 60px no-repeat,
url(http://lorempixel.com/500/100/nature/3) 0px 106px / 100% 46px no-repeat;
/* or as long-hand properties
background-image: url(http://lorempixel.com/100/100/nature/1), url(http://lorempixel.com/100/100/nature/2), url(http://lorempixel.com/100/100/nature/3);
background-repeat: no-repeat;
background-size: 100% 46px, 100% 60px, 100% 46px;
background-position: 0px 0px, 0px 46px, 0px 106px;*/
height: 152px;
width: 200px;
}
/* just for demo - hover to see responsiveness */
div {
transition: all 1s;
}
div:hover {
width: 400px;
}
<div></div>

Strange padding issue

Please look at this page
What I want to achieve is
and
Using following jQ function to dynamically resize div height based on document height
$(window).load(function() {
$('.sideBg').css({ 'height': ($(document).height())});
});
What am I missing?
Wouldn't it be better if you just used the background on the body? This way, you don't even need the additional elements or JavaScript.
body {
background: url(http://vefaestetik.az/design/img/bg/side_bg.png),
url(http://vefaestetik.az/design/img/bg/side_bg.png) 100% 0,
black radial-gradient(ellipse at center, #45484D 0%,black 100%);
background-repeat: repeat-y;
}
Don't forget to use background: black url(/design/img/bg/000.png); for the footer.
And don't forget that you should also have the prefixed versions
background: url(http://vefaestetik.az/design/img/bg/side_bg.png),
url(http://vefaestetik.az/design/img/bg/side_bg.png) 100% 0,
black -webkit-radial-gradient(center, ellipse cover, #45484D 0%,black 100%);
background: url(http://vefaestetik.az/design/img/bg/side_bg.png),
url(http://vefaestetik.az/design/img/bg/side_bg.png) 100% 0,
black -moz-radial-gradient(center, ellipse cover, #45484D 0%,black 100%);
background: url(http://vefaestetik.az/design/img/bg/side_bg.png),
url(http://vefaestetik.az/design/img/bg/side_bg.png) 100% 0,
black -o-radial-gradient(center, ellipse cover, #45484D 0%,black 100%);
before the unprefixed one in the styles for the body.
Works for me if I make these changes via Developer Tools
About compatibility: multiple backgrounds have better support than gradients (multiple backgrounds are supported by IE9, while CSS gradients are not). Actually, this won't work in IE 9 precisely because of the gradient. However, you can make it work in IE9 without the gradient by adding before all the prefixed versions a multiple background fallback (without the gradient).
background: url(http://vefaestetik.az/design/img/bg/side_bg.png),
black url(http://vefaestetik.az/design/img/bg/side_bg.png) 100% 0;
you need to remove the margin-top that is on your .wrapper <div> for the top to be fixed:
.wrapper {
background: url("/design/img/wrapper-bg.png") no-repeat center top;
margin-bottom: 0 !important;
margin-left: auto;
margin-right: auto;
/*margin-top: 20px; remove this */
padding-top: 120px;
position: relative;
width: 1020px;
}
Then for the bottom part i would suggest to get the height of the .wrapper <div>:
$(function() {
var wrapperHeight = $('.wrapper').height();
$('.sideBg').css('height': +wrapperHeight+'px');
});
If you are facing unnecessary padding always use a reset.css file.
Copy the code from here: http://meyerweb.com/eric/tools/css/reset/

How to create an triangle shape (fixed height, width=100%) with background

I have a graphic background, and I need to display a colored triangle in the top left corner (independing the resolution).
Can I create a triangle shaped element using only HTML/CSS/JS with width = 100% and height = 200px with background = red?
I can create it by IMG with width=100%, but I was hoping for a better solution than resizing an image.
The solution needs to be compatible with IE7+ and using browser's versions (more than 2%).
Thanks
Because you can't create a border which has a percentage, try using vw (viewer width) instead. So:
.triangle{
width: 0;
height: 0;
border-bottom: 600px solid blue;
border-left: 100vw solid transparent;
}
Vw units aren't supported by IE8, you will need to use a JS fallback for browsers that don't support these units.
Here is a jQuery script that sets the border-width according to the window size and adjusts it on window resize. Tested in IE8 (IE tester) :
$(document).ready(function() {
function triangle() {
var width = $('#wrap').width(),
border = width / 4;
$("#wrap .tr").css({
"border-left": border + "px solid #fff",
"border-bottom": border + "px solid transparent"
});
}
triangle();
$(window).on('resize', triangle);
});
body {
background: #fff;
}
#wrap {
position: relative;
min-height: 500px;
background: teal;
}
.tr {
position: absolute;
left: 0;
top: 0;
border-left: 200px solid #fff;
border-bottom: 200px solid transparent;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="wrap">
<div class="tr"></div>
</div>
To expand on web-tiki's answer, I think this is actually what you're going for:
$(document).ready(function() {
function triangle() {
$("#wrap .tr").css({
"border-left": $('#wrap').width() + "px solid #fff",
"border-bottom": "200px solid transparent"
});
}
triangle();
$(window).on('resize', triangle);
});
body {
background: #fff;
}
#wrap {
position: relative;
min-height: 500px;
background: teal;
}
.tr {
position: absolute;
left: 0;
top: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="wrap">
<div class="tr"></div>
</div>
I think it would be best to use background instead of borders:
.my-triangle {
width: 100%;
height: 200px;
background: linear-gradient(to left top, transparent 50%, red 50%);
}
<div class="my-triangle"></div>
Note that in order for it to be cross-browser compatible you will need to fiddle around with CSS prefixes, IE filters and SVG. (I don't readily have access to IE so I'll leave that one for you, but it would be something along these lines:)
background-image: -webkit-gradient(linear, right bottom, left top, color-stop(0, transparent), color-stop(0.5, transparent), color-stop(0.5, #FF0000), color-stop(1, #FF0000));
background-image: -webkit-linear-gradient(bottom right, transparent 0%, transparent 50%, #FF0000 50%, #FF0000 100%);
background-image: -moz-linear-gradient(bottom right, transparent 0%, transparent 50%, #FF0000 50%, #FF0000 100%);
background-image: -ms-linear-gradient(bottom right, transparent 0%, transparent 50%, #FF0000 50%, #FF0000 100%);
background-image: -o-linear-gradient(bottom right, transparent 0%, transparent 50%, #FF0000 50%, #FF0000 100%);
background-image: linear-gradient(to top left, transparent 0%, transparent 50%, #FF0000 50%, #FF0000 100%);
Just take a div element, give a class name 'triangle-topleft', and write the below given css
.triangle-topleft {
width: 0;
height: 0;
border-top: 100px solid red;
border-right: 100px solid transparent;
}
color of border-top would be the div's background color..Here it's red.
For more triangle structures, follow this link..
[http://css-tricks.com/examples/ShapesOfCSS/][1]

Categories