I want to create same bottom triangle effect with background but i am not able to get this effect bottom triangle with background image.
enter image description here
i have added the code here but not getting the same effect.bottom arrow im not able to extend as in image.
.logo,.nav,.social-icons{ float:left;}
body{ color:#000; background:#ccc;}
.container{border:1px solid red;}
.clear{ clear:both;}
html,body{margin:0;padding:0;}
/*****************************
BANNER
*****************************/
.section {
height: 680px;
width: 100%;
background: url("http://i.imgur.com/YtluDV9l.jpg") no-repeat left top;
background-size:cover;
}
.bottom-container {
margin-top: -137px;
height: 100px;
width: 100%;
}
.text {
position: relative;
box-sizing: border-box;
height: 300px;
padding-top: 36px;
text-align: center;
line-height: 85px;
background: url("http:////i.imgur.com/uCYtKen.jpg") no-repeat left top;
background-clip: content-box;
overflow: hidden;
margin: 25px 0 0 0;
}
.text:before {
left: 0px;
width: 26%;
transform-origin: left bottom;
transform: skew(-134deg);
}
.text:after, .text:before {
position: absolute;
content: '';
top: 0px;
height: 35px;
background: #fff;
}
.text:after {
right: 2px;
width: 74%;
transform-origin: right bottom;
transform: skew(-226deg);
}
<body>
<!--WRAPPER:STARTS-->
<div id="wrapper">
<!--HEADER:STARTS-->
<!--BANNER:STARTS-->
<section class="section">
</section>
<div class="bottom-container">
<div class="text">Some text</div>
<div class="middle-image"></div>
<div class="right-image"></div>
</div></div>
</body>
html,body{background:url(http://i.imgur.com/ixr4wNC.jpg); height:100%;padding:0;margin:0;overflow:hidden;}
.line {
margin-top: 50px;
height: 5px;
width: 20%;
background: #fff;
position: relative;
box-sizing: border-box;
}
.line:after,
.line:before {
content: "";
position: absolute;
}
.line:after {
left: calc(100% + 2px);
height: 25px;
width: 25px;
top: -12px;
border-top: 5px solid #fff;
border-left: 5px solid #fff;
transform: rotate(225deg);
}
.line:before {
height: 100%;
top: 0;
left: calc(100% + 34px);
width: 400px;
background: inherit;
}
<div class="line"></div>
Is this the same that you are looking for?
Here is JSFiddle
Hope this helps.
Related
I want to place my nav in 4 different places. Top, Right, Bottom, And middle. But I cant seem to get it to work. And when i for example mean Right, it should still be in the center of top and bottom. I donät know if you understand but i don't really know how to describe it better.
#navOne {
display: block;
text-align: center;
padding-top: 1em;
}
#navTwo {
display: block;
position: relative;
float: right;
margin-top: 43vh;
transform: rotate(90deg);
}
#navThree {
display: block;
position: absolute;
text-align: center;
margin-left: 50%;
transform: translateX(-50%);
margin-top: 86vh;
}
#navFour {
display: block;
position: relative;
transform: rotate(-90deg);
float: left;
margin-top: 42vh;
margin-left: 0.5em;
}
<p id="navOne" class="navs">About me</p>
<p id="navTwo" class="navs">Portfolio</p>
<p id="navThree" class="navs">Skills</p>
<p id="navFour" class="navs">Contact</p>
I add the following CSS and Found that none of your link is perfectly centered! here is the code:
body {
margin: 0;
padding: 0;
}
.box {
height: 50vh;
width: 100vw;
position: absolute;
border: 1px solid red;
top: 0;
box-sizing: border-box;
}
.box.two {
height: 100vh;
width: 50vw;
position: absolute;
border: 1px solid rgb(255, 0, 64);
top: 0;
}
a {
outline: 1px solid green;
}
The image is the outcome of my code which you see. So I'm rewriting the code for you.
body {
margin: 0;
padding: 0;
}
.navs {
text-align: center;
margin: 0;
}
.navtop {
margin-top: 15px;
}
.navright {
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%) rotate(90deg);
}
.navbottom {
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin-bottom: 15px;
}
.navleft {
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%) rotate(-90deg);
}
/* below code is for checking every thing is perfectly centered*/
.box {
height: 50vh;
width: 100vw;
position: absolute;
border: 1px solid red;
top: 0;
box-sizing: border-box;
}
.box.two {
height: 100vh;
width: 50vw;
position: absolute;
border: 1px solid rgb(255, 0, 64);
top: 0;
}
a {
outline: 1px solid green;
}
<p id="navOne" class="navs navtop">About me</p>
<p id="navTwo" class="navs navright">Portfolio</p>
<p id="navThree" class="navs navbottom">Skills</p>
<p id="navFour" class="navs navleft">Contact</p>
<!-- below html is for testing purpose -->
<div class="box"></div>
<div class="box two "></div>
I'm trying to skew my div with border-radius-left-top and border-radius-left-right but I think that isn't solution. To understand what I'm trying to do, here it's image:
border-radius: 50% / 100%;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
Your border-radius has this shape because the circle has different height and width(like in pink-one). For correct shape it should be like square. Height should be equal width. Use pseudo element to do this(the third div):
*, *:before, *:after{
box-sizing: border-box;
}
div {
position: relative;
height: 200px;
padding-bottom: 70px;
}
.one {
background-color: #fcfdfe;
}
.one:before {
content: '';
position: absolute;
border-radius: 50%;
height: 100%;
width: 100%;
background-color: pink;
}
.two {
margin-top: -70px;
padding-top: 70px;
padding-bottom: 70px;
background-color: #edf3f8;
border-top-left-radius: 200% 240px;
border-top-right-radius: 200% 240px;
}
.three {
position: relative;
background-color: #10538c;
}
.three-border{
position:absolute;
overflow:hidden;
height:70px;
top:-70px;
left:0;
right:0;
}
.three-border:before {
content: '';
position: absolute;
border-radius: 50%;
height: 300vw;
width: 300vw;
margin: 0 -100vw;
background-color: #10538c;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css" rel="stylesheet"/>
<div class="one">1111</div>
<div class="two">2222</div>
<div class="three">
<div class="three-border"></div>
3333
</div>
Hello I'm trying to make something like this with css Image Link.
I've tried transform: skew(0deg, -35deg); and transform: rotate(-45deg); but the background color isn't as the image.
you can try this
.container{
border: 1px solid black;
margin: 40px;
height: 400px;
position: relative;
overflow: hidden;
}
.rotated{
background: maroon;
color: white;
transform: rotate(45deg);
text-align: center;
width: 100px;
position: absolute;
right: -25px;
top: 15px;
}
<div class="container">
<div class="rotated">TEXT</div>
</div>
You can use this css approach for this
.card {
width:300px;
height: 300px;
position: relative;
background: #ddd;
overflow: hidden;
}
.tag {
position: absolute;
top:5px;
right:-24px;
background: #990000;
padding: 5px 30px;
text-align: center;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
color: #fff;
font-size: 14px;
}
<div class="card">
<div class="tag">New</div>
</div>
Well, I tested this only in chrome. I hope this can serve as a starting point for you.
https://jsfiddle.net/pablodarde/af5c9x78/
.container {
display: flex;
justify-content: center;
align-items: center;
width: 380px;
height: 380px;
background: linear-gradient(#D4EDFF, #fff);
}
.inner {
width: 300px;
height: 300px;
background: #fff;
box-shadow: 0 0 2px rgba(0,0,0,.1);
}
.holder-tag {
position: relative;
width: 0;
height: 0;
left: 300px;
}
.holder-tag .tag {
position: absolute;
right: -30px;
top: 20px;
border-bottom: 20px solid #900;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
height: 10px;
width: 90px;
transform: rotate(45deg);
}
.holder-tag span {
position: absolute;
right: -18px;
top: 25px;
width: 110px;
line-height: 1px;
color: #fff;
font: normal 14px Arial, Verdana;
text-align: center;
padding: 5px 0 0 0;
box-sizing: border-box;
transform: rotate(45deg);
}
.content {
width: 80%;
padding: 10px;
}
<div class="container">
<div class="inner">
<div class="holder-tag">
<div class="tag"></div>
<span>new</span>
</div>
<div class="content">
<p>
You can write text here without worrying about space.
</p>
</div>
</div>
</div>
How would i create a div shape like this? I have read a lot of techniques but i could not figure this one out. Inside the div is text that should not be distorted.
Every technique is welcome it does not have to be pure css.
My HTML structure:
<div class="intro">
<div class="intro-header">
<h1>Headline WOW</h1>
</div>
<div class="intro-text">
<p>Mieleni minun tekevi, aivoni ajattelevi lähteäni laulamahan, saa'ani sanelemasaa'ani sanelema sanelemasaa'ani sanelema </p>
</div>
</div>
you could use some skewed pseudo elements for this:
.first,
.last {
text-align: center;
line-height: 80px;
height: 80px;
background: green;
position: relative;
display: inline-block;
width: 400px;
margin-bottom: 20px;
}
.first:after {
content: "";
position: absolute;
bottom: 0;
left: 0;
height: 50%;
width: 100%;
transform: SkewY(2deg);
transform-origin: bottom left;
background: inherit;
}
.last:before {
content: "";
position: absolute;
top: 0;
left: 0;
height: 50%;
width: 100%;
transform: SkewY(2deg);
transform-origin: bottom right;
background: inherit;
}
<div class="first">FIRST LINE</div>
<div class="last">LAST LINE</div>
An alternative (possibly) would be to use a gradient (although this may lead to jagged edges). Solution credit to Harry
body {
background: -webkit-linear-gradient(0deg, crimson, indianred, purple);
}
div {
height: 400px;
width: 400px;
background: -webkit-linear-gradient(75deg, lightseagreen 45%, transparent 45%, transparent 55%, lightseagreen 55%);
}
<div></div>
You can do this with border cut-offs.
As an example:
.top {
height: 300px;
background: red;
position: relative;
width: 300px
}
.top:before {
content: '';
position: absolute;
bottom: 0;
right: 0;
border-bottom: 10px solid white;
border-right: 300px solid red;
width: 0;
}
.bottom {
height: 300px;
background: red;
position: relative;
width: 300px;
padding-top: 10px;
margin-top: 0px;
}
.bottom:before {
content: '';
position: absolute;
top: 0;
right: 0;
border-top: 10px solid white;
border-left: 300px solid red;
width: 0;
}
<div class="top">Text</div>
<div class="bottom">Text</div>
This should do it.
html,body{
margin:0;
height:100%;
}
.intro{
width:400px;
display:inline-block;
background:red;
padding:50px;
}
.intro-header,.intro-text{
width:100%;
display:inline-block;
background:#ccc;
text-align:center;
position:relative;
}
.intro-header{
margin-bottom:50px;
}
.intro-header:after{
position:absolute;
left:0;
content:"";
width: 0;
height: 0;
border-left: 400px solid transparent;
border-top: 20px solid #ccc;
}
.intro-text:after{
position:absolute;
top:-20px;
left:0;
content:"";
width: 0;
height: 0;
border-right: 400px solid transparent;
border-bottom: 20px solid #ccc;
}
Example: CodePen
The effect I'm trying to make is as in this image:
http://i271.photobucket.com/albums/jj146/cosmossx/footer.jpg
I've made some progress as you can see in this FIDDLE
css:
.final{ background:#000;
width:100%;}
.triangle {
border-color: white black black black;
border-style: solid;
border-width: 15px 25px 25px 25px;
height: 0px;
width: 500px;
margin: 0 auto;
}
.triangle2 {
border-color: black white white white;
border-style: solid;
border-width: 15px 25px 25px 25px;
height: 0px;
width: 500px;
margin: 0 auto;
}
HTML:
<div class="final"> <div class="triangle"></div>
<br>
<br>
<br>
<br>
<br><br>
<br>
<br>
</div>
<div class="triangle2"></div>
My question is: what would be the best way to make it?
Thanks.
Best approach would be using css transform function and pseudo-elements
DEMO
Source (using Sass and Autoprefixer for brevity):
<footer class="footer">
<div class="footer__main">
<div class="footer__inner">
<div class="footer__content">
<!-- content goes here -->
</div>
</div>
</div>
<div class="footer__bottom"></div>
</footer>
.footer {
height: 500px;
}
.footer__main {
height: 80%;
background: #eee;
}
.footer__bottom {
height: 20%;
background: darken(#eee, 20);
}
.footer__inner {
background: white;
max-width: 800px;
margin: 0 auto;
height: 100%;
padding: 0 20px;
position: relative;
}
.footer__content {
background: #eee;
height: 100%;
transform: translateY(20px);
position: relative;
&:before,
&:after {
content: "";
background: darken(#eee, 10);
width: 20px;
height: 100%;
position: absolute;
top: 0; bottom: 0;
z-index: 2;
}
&:before {
right: 100%;
transform-origin: 100%;
transform: skewY(45deg);
}
&:after {
transform-origin: 0;
left: 100%;
transform: skewY(-45deg);
}
}