I have been trying to create an image like this using css.
which I partly achieved like this
<div class="nav-tab">
<div class="arrow-left"></div>
<div class="arrow"></div>
<div class="arrow-right"></div>
</div>
CSS
div {
float: left;
margin: 0;
padding: 0;
}
.arrow {
background-color: green;
height: 60px;
width: 240px;
}
.arrow-right {
width: 0;
height: 0;
border-top: 30px solid transparent;
border-bottom: 30px solid transparent;
border-left: 30px solid green;
}
.arrow-left {
width: 0;
height: 0;
border-top: 30px solid transparent;
border-bottom: 30px solid transparent;
border-left: 30px solid white;
position: relative;
left: 30px;
}
Fiddle: https://jsfiddle.net/codeandcloud/g3cmgw8y/6/
But the design has these problems
1) The arrow-left not having background-color transparent. ( Is it possible as per this design? )
2) What I want is to use it as the image below. When I put each .nav-tab in a ul > li with float:left the output is garbled.
Fiddle: https://jsfiddle.net/g3cmgw8y/7/
What am I doing wrong and how should I fix this.
How about using skew instead?
https://jsfiddle.net/foreyez/1gf3zam3/
<div class='arrow'>
<div class='arrowtop'>
</div>
<div class='arrowbottom'>
</div>
</div>
.arrowtop {
transform: translateX(50px) skewX(45deg);
width:400px;
height:50px;
background:red;
}
.arrowbottom {
transform: translateX(50px) skewX(-45deg);
width:400px;
height:50px;
background:red;
}
Hmm ... maybe this's an answer ?
.arrow-left {
border-top: 30px solid green;
border-bottom: 30px solid green;
border-left: 30px solid transparent;
position:relative;
left: 0px;
}
Related
The above is an image of a project I'm working on. This is how far I got:
Creating the box was fairly simple; however, now I have NO IDEA how to create this cut corner on the bottom left. I've tried a bunch of things already and most things work if the background isn't transparent but a block of color. Since the background needs to be this image, I can't make the cut corner work without having one side show a certain color. This is my code:
<div class="profile">
// HTML content
</div>
<style>
profile {
border: 2px solid #fff;
color: #fff;
height: 100%;
padding: 10px;
width: 250px;
</style>
I've tried multiple things already, such as this here (not the exact code I used, but I followed this example):
.cut {
border: none;
position: relative;
}
.cut:before {
content: "";
position: absolute;
bottom: 0;
right: 0;
border-bottom: 20px solid lightgrey;
border-left: 20px solid #e67e22;
width: 0;
}
This creates a cut corner, but with a block of a solid color and I need the image to be shown, not the color.
Does anyone have a clue how to do this? Suggestions are much appreciated. Thanks!
You may use before/after element to make the bottom part like this :
.profile {
position:relative;
display:inline-block;
margin:50px;
border:1px solid #000;
border-bottom:none;
width:100px;
height:200px;
background:#ccc;
}
.profile:after {
content:" ";
position:absolute;
border:1px solid #000;
height:20px;
width:80px;
bottom:-20px;
right:-1px;
border-top:0;
border-left:0;
background:#ccc;
}
.profile:before {
content:" ";
position:absolute;
border-bottom:1px solid #000;
height:29px;
width:29px;
transform:rotate(45deg);
bottom:-15px;
left:6px;
background:#ccc;
}
<div class="profile"></div>
the bottom is split into tow part : a rectangle with only two border + a square with one border rotated with 45°
Hope it helps
NB : Becarefull when changing the dimensions
.profile {
position: relative;
display: inline-block;
width: 200px;
height: 200px;
border-top: 2px solid #000;
border-left: 2px solid #000;
border-right: 2px solid #000;
padding: 20px;
box-sizing: border-box;
font-family: Arial, sans-serif;
}
.profile h2 {
margin: 0 0 10px;
}
.profile p {
font-size: 14px;
}
.profile .bottom {
position: absolute;
bottom: -30px;
right: -2px;
width: 180px;
height: 30px;
border-bottom: 2px solid #000;
box-sizing: border-box;
border-right: 2px solid #000;
}
.profile .bottom::before {
content: '';
position: absolute;
left: -10px;
bottom: -4px;
width: 2px;
height: 35px;
background-color: #000;
transform: rotate(-35deg);
}
<div class="profile">
<h2>Name</h2>
<p>Description</p>
<div class="bottom"></div>
</div>
I think you're trying to cut the corner of an image instead of div, so you can do something like this:
body {
background: url('https://www.lunapic.com/editor/premade/o-paint-bucket.gif');
}
.container {
display: inline-block;
width: 200px;
height: 300px;
overflow: hidden;
}
.container .image_container {
width: 320px;
height: 550px;
overflow: hidden;
display: block;
position: relative;
transform: rotate(45deg);
margin-left: calc(260px - 360px);
margin-top: -40px;
}
.container .image_container .image {
transform: rotate(-45deg);
margin-top: 10px;
margin-left: -10px;
}
<div class="container">
<div class="image_container">
<div class="image">
<img src="https://www.w3schools.com/css/img_fjords.jpg" />
</div>
</div>
</div>
I want to make div like triangle. I describe clear my question by images in blow.
my code is:
<div class="rest_pack">
<img width="100%" src="<?= Yii::$app->request->baseUrl . '/files/upload/3.png' ?>">
<div class="row side_info">
<div class="top">
ساندویچ مخصوص
</div>
<div class="bottom">
5,500
تومان
</div>
</div>
</div>
css:
.rest_pack .side_info{
position: absolute;
width: 100%;
background-color: #FFF;
top: 100px;
opacity: 0.8;
}
.rest_pack .side_info .top{
text-align: center;
font-weight: bold;
font-size: 17px;
color: #3131AA;
padding-top:5px;
}
.rest_pack .side_info .bottom{
text-align: center;
font-weight: bold;
font-size: 16px;
color: #F63440;
padding-top:5px;
}
The result is:
but I want something like this.
I want to make red DIV.
Got it from CSS Tricks https://css-tricks.com/snippets/css/css-triangle/
<div class="arrow-up"></div>
<div class="arrow-down"></div>
<div class="arrow-left"></div>
<div class="arrow-right"></div>
CSS goes here :
.arrow-up {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid black;
}
.arrow-down {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #f00;
}
.arrow-right {
width: 0;
height: 0;
border-top: 60px solid transparent;
border-bottom: 60px solid transparent;
border-left: 60px solid green;
}
.arrow-left {
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-right:10px solid blue;
}
Just change values and you get whatever Triangle you want
You can do it using :after selector and border-left, border-bottom to adjust triangle as you need.
like this:
.title{
position: absolute;
padding:25px;
bottom:0;
right:0;
z-index:1;
}
div {
position: relative;
width: 500px;
height: 300px;
background-image: url("http://i.stack.imgur.com/ys1Jo.png");
}
div:after {
position: absolute;
content: '';
width: 0;
height: 0;
bottom: 0;
border-left: 500px solid transparent;
border-bottom: 130px solid rgb(0, 114, 255);
-moz-transform: scale(0.999);
-webkit-backface-visibility: hidden;
}
<div class="test">
<span class="title">Enter Text Here</span>
</div>
Please try below code
HTML
<div class="main">
<a rel="nofollow" href="http://i.stack.imgur.com/ys1Jo.png"><img alt="enter image description here" src="http://i.stack.imgur.com/ys1Jo.png"> </a>
</div>
CSS
.main { border: 1px solid red; border-radius: 5px 0 5px 5px; }
I am trying to create a downward-pointing arrow (.down) with CSS as a decorative element between the sections of a one-page site.
The problem is that the background-color of the .down-class is not spanning the whole width of the page:
This is my code:
HTML:
... </div>
<!-- About End-->
<div id="seperator"></div>
<div class="down"></div>
<!-- Portfolio -->
<div class="container-portfolio"> ... </div>
CSS:
#seperator {
background: #34495E;
height: 10px;
left: 0; right: 0;
}
.down {
width: 0px;
height: 0px;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #34495E;
margin: 0 auto;
background: #16A085;
background-size: 100%;
}
I already tried to modify the background-size property of the .down-class, unfortunately without success. I would appreciate your advice on this. Thank you.
Try setting the background on the .down div and giving it 100% width, and then creating the 'arrow' as an :after pseudo-element.
#seperator {
background: #34495E;
height: 10px;
left: 0; right: 0;
}
.down {
width: 100%;
background: #16A085;
}
.down:after {
content: '';
display: block;
margin: 0 auto;
width: 0px;
height: 0px;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #34495E;
}
Like this:
http://jsbin.com/APIyEbIp/1/edit
You might want to wrap another background class. Like this:
#seperator {
background: #34495E;
height: 10px;
left: 0; right: 0;
}
.down {
width: 0px;
height: 0px;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #34495E;
margin: 0 auto;
}
.down_bkg {
background: #16A085;
background-size: 100%;
width:100%;
}
And HTML is like this:
<div id="seperator"></div>
<div class="down_bkg">
<div class="down"></div>
</div>
Try updating the down class CSS
width:100% or
min-width: 100%
I'm trying to center an anchor tag which is displayed as a CSS3 shape (a large "play"-arrow) in a div.
My markup is as follows:
<div class="element halfcol">
<div class="inner beige-bg fullheight">
<div class="element-content">
</div>
</div>
</div>
And the CSS is:
.element {
float: left;
margin-right: 20px;
margin-bottom: 20px;
}
.element .inner {
border: 2px solid #94111e;
min-height: 50px;
border-radius: 10px;
background-color: #fcf9e3;
height: inherit;
-moz-box-shadow: 2px 2px 6px #646464;
-webkit-box-shadow: 2px 2px 6px #646464;
box-shadow: 2px 2px 6px #646464;
}
.element .inner .element-content {
padding: 10px 15px;
height: inherit;
}
.element .inner .no-padding {
padding: 0px;
}
.element .beige-bg {
background-color: #fcf9e3;
}
.element .red-bg {
background-color: #94111e;
}
.element .transparent-bg {
background-color: transparent;
}
.element .white-bg {
background-color: #ffffff;
}
.element .smallheight,
.element .doubleheight,
.element .fullheight {
overflow-y: hidden;
}
.element .smallheight {
height: 90px;
}
.element .doubleheight {
height: 220px;
}
.element .doubleheight .element-content {
position: relative;
}
.element .fullheight {
height: 350px;
}
.element .no-padding {
padding: 0px !important;
}
/**** Shapes ****/
.play-button {
display: block;
margin: 0 auto;
border-left: 100px solid #94111e;
border-top: 60px solid transparent;
border-bottom: 60px solid transparent;
}
Which gives me this:
What I'm looking for is this:
I could just give it a margin top/left to center it, but the .element container is of variable height and width.
Anyone know how to achieve this? :-)
Thanks in advance!
You need to make the .element-content be position:relative and then
add
position:absolute;
top:50%;
left:50%;
margin-top:-60px;
margin-left:-50px;
to the .play-button
Demo at http://jsfiddle.net/jKs6F/
I changed your .play-button class as follows:
.play-button {
display: block;
margin: 0 auto;
border-left: 100px solid #94111e;
border-top: 60px solid transparent;
border-bottom: 60px solid transparent;
margin-left: -50px; /* half border-left value */
margin-top: -60px; /* border-top value */
position: relative; left: 50%; top: 50%;
}
See demo
Ok so, I'm trying to replicate the effect you see here at the bottom of the page, with the back to top button: http://www.ppp-templates.de/tilability/ - After the content area for We stay connected.
basically he's using a background image for that and I'd like to replicate it with CSS and keep the same effect.
I know how to create triangles with CSS with borders, but in my case I'd like to use the transparent bg image and not a color so I can't use borders
I removed the background image and used #FFF on the whole div, so it's all white now... I created a new div in which I added the back to top button and added background: transparent to it so it's transparent, but how do I create the triangle via CSS?
Any help is greatly appreciated.
The Fiddle:
http://jsfiddle.net/JaMH9/2/
The HTML:
<div class="bar">
<span class="home">^<br>Home, sweet home!</span>
</div>
The CSS:
.bar {
position: relative;
width: 90%;
height: 30px;
margin: 0 auto;
}
.home {
position: absolute;
top: 0px;
left: 60%;
width: 20%;
text-align: center;
}
.bar:before, .bar:after {
content:'';
position: absolute;
top: 0;
height: 0;
border-top: 30px solid white;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
.bar:before {
left: 0;
width: 70%;
border-right: 30px solid transparent;
}
.bar:after {
right:0;
width: 30%;
border-left: 30px solid transparent;
}
Here's one way to make a triangle with fairly minimal markup and css:
HTML:
<div class="triangle"></div>
CSS:
.triangle {
width: 0;
height: 0;
border-left: 35px solid transparent;
border-right: 35px solid transparent;
border-bottom: 35px solid gray;
}
http://jsbin.com/iribib/21
Here you go, http://jsfiddle.net/pkUx7/1/
HTML
<body>
<div id = "footer"></div>
<div id = "bottom-line-left"></div>
<div id = "triangle"></div>
<div id = "bottom-line-right"></div>
</body>
CSS
body {
background-color: purple;
}
div {
margin:0;
padding:0;
background-color: violet;
}
#footer {
height: 100px;
}
#bottom-line-left, #bottom-line-right {
display: inline-block;
height: 20px;
}
#bottom-line-left {
width: 61%;
}
#bottom-line-right {
float: right;
width: 37%;
}
#triangle {
margin-left:-6px;
margin-right: -4px;
padding:0;
display: inline-block;
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 20px solid purple;
}
I just threw this together, there's probably a better way to achieve this effect.
HTML
<div class="div1">Lorem Ipsum</div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
CSS
body {
background-color: gray;
border: 20px solid gray;
}
.div1 {
background-color: white;
border: 20px solid white;
}
.div2 {
float: right;
border-top: 20px solid white;
border-right: 20px solid white;
border-left: 20px solid transparent;
}
.div3 {
float: right;
margin: 10px -20px;
border-bottom: 20px solid white;
border-right: 20px solid transparent;
border-left: 20px solid transparent;
}
.div4 {
border-top: 20px solid white;
border-right: 20px solid transparent;
margin-right: 40px;
}
See it here.
You can use vector path.
For instance, transparent triangle with green border:
<svg height="151" width="150">
<path d="m0 150 h150 l -75 -150 z" fill="transparent" stroke="green" />
</svg>
See it here.