enter image description here how to create this card having this brown and yellow colored frame
thanks in advance
i tried with css border with this code but it is only creating brown part, i am not able to create yellow part of the frame
.card {
background-color: var(--background);
display: block;
width: 300px;
min-height: 90px;
cursor: pointer;
padding: 15px;
margin: calc(50vh - 30px) auto 0 auto;
border: 3px solid var(--primary);
box-shadow: 10px -10px 0 -3px var(--background), 10px -10px var(--green);
}
is it ok for you?
you can play with values in before and after, actually it's 5px around.
.card {
position: relative;
background-color: grey;
display: block;
width: 300px;
min-height: 90px;
cursor: pointer;
padding: 15px;
margin: calc(50vh - 30px) auto 0 auto;
}
.card::before {
content: '';
position: absolute;
left: -5px;
top: -5px;
width: calc(100% - 25px);
height: calc(100% - 10px);
border-top: 5px solid brown;
border-left: 5px solid brown;
}
.card::after {
content: '';
position: absolute;
top: -5px;
right: 10px;
height: 5px;
width: 25px;
background-color: orange;
}
<div class="card">
</div>
Related
I want to create a shape using CSS. The only problem I am facing is the alignment of semicircle with the border of rectangle which is not working out properly.
I am attaching the image of what I have done till now. Can anybody help me out to fix these alignment problem. Thank you.
body {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: white;
}
#talkbubble {
width: 120px;
height: 80px;
border: 4px solid #4C4C4C;
position: relative;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
#talkbubble:before {
content: "";
position: absolute;
top: 42%;
left: -11.6px;
width: 30px;
height: 15px;
border: 4px solid #4C4C4C;
border-bottom: none;
border-top-left-radius: 30px;
border-top-right-radius: 30px;
background-color: white;
transform: rotate(90deg);
box-sizing: border-box;
}
#talkbubble:after {
content: "";
position: absolute;
top: 42%;
right: -12px;
width: 30px;
height: 15px;
border: 4px solid #4C4C4C;
border-bottom: none;
border-top-left-radius: 30px;
border-top-right-radius: 30px;
background-color: white;
transform: rotate(270deg);
box-sizing: border-box;
}
<div id="talkbubble"></div>
I would do it differently with one element:
.ticket {
width:300px;
height:200px;
border-radius:20px;
border:8px solid;
background:
radial-gradient(circle 38px at right,#000 95%,#0000),
radial-gradient(circle 38px at left ,#000 95%,#0000);
background-origin:border-box;
-webkit-mask:
radial-gradient(circle 30px at right,#0000 95%,#000) right,
radial-gradient(circle 30px at left ,#0000 95%,#000) left;
-webkit-mask-size:51% 100%;
-webkit-mask-repeat:no-repeat;
}
<div class="ticket"></div>
You could add overflow hidden in case, and a full circle?
.ticket-outer {
overflow: hidden;
height: 150px;
width: 300px;
margin: 50px auto;
}
.ticket {
border: 5px solid #000;
border-radius: 20px;
height: 150px;
width: 300px;
position: relative;
box-sizing: border-box;
}
.ticket::before,
.ticket::after {
content: '';
width: 50px;
height: 50px;
border: 5px solid #000;
background: #fff;
border-radius: 50%;
position: absolute;
top: 50%;
left: -30px;
transform: translateY(-50%);
z-index: 2;
}
.ticket::after {
left: auto;
right: -30px;
}
<div class="ticket-outer">
<div class="ticket"></div>
</div>
I have an absolutely positioned CSS banner that has a responsive width and height based on viewport size. The element is centered on desktop and tablet devices, but not on mobile (when the banner's width starts to shrink).
I can't use the classic margin: 0 auto; trick because the margins have to be set to a fixed value for the banner to work.
The code is below:
HTML:
<h1 class="banner">A Simple CSS Banner</h1>
CSS:
#import url(https://fonts.googleapis.com/css?family=Rye);
body
{ background: #eee; }
.banner {
position: absolute;
left: 50%;
display: block;
margin: 100px -200px;
width: 400px;
max-width: calc(100% - 150px);
height: 60px;
border: 1px solid #8a1;
font: normal 30px/60px 'Rye';
text-align: center;
color: #451;
background: #9b2;
border-radius: 4px;
box-shadow: 0 0 30px rgba(0,0,0,.15) inset,
0 6px 10px rgba(0,0,0,.15);
}
.banner::before,
.banner::after {
content: '';
position: absolute;
z-index: -1;
left: -70px;
top: 24px;
display: block;
width: 40px;
height: 0px;
border: 30px solid #9b2;
border-right: 20px solid #791;
border-bottom-color: #94b81e;
border-left-color: transparent;
transform: rotate(-5deg);
}
.banner::after {
left: auto;
right: -70px;
border-left: 20px solid #791;
border-right: 30px solid transparent;
transform: rotate(5deg);
}
#media (max-width: 475px) {
.banner {
height: 90px;
line-height: 45px;
}
.banner::before,
.banner::after {
border-width: 45px;
border-right-width: 30px;
}
.banner::after {
border-left-width: 30px;
border-right-width: 45px;
}
}
Link to working codepen: https://codepen.io/Adam0410/pen/QZOKdV
Thanks for the help!
Check if this helps you.
#import url(https://fonts.googleapis.com/css?family=Rye);
body {
background: #eee;
}
.banner {
position: absolute;
left: 50%;
transform: translate(-50%);
display: block;
margin: 100px 0;
width: 400px;
max-width: calc(100% - 150px);
min-height: 60px;
}
.banner span {
display: block;
position: relative;
z-index: 1;
border: 1px solid #8a1;
font: normal 30px/60px "Rye";
text-align: center;
color: #451;
background: #9b2;
border-radius: 4px;
box-shadow: 0 0 30px rgba(0, 0, 0, 0.15) inset, 0 6px 10px rgba(0, 0, 0, 0.15);
}
.banner::before,
.banner::after {
content: "";
position: absolute;
z-index: -1;
left: -70px;
bottom: -24px;
display: block;
width: 40px;
height: 0px;
border: 30px solid #9b2;
border-right: 20px solid #791;
border-bottom-color: #94b81e;
border-left-color: transparent;
transform: rotate(-5deg);
}
.banner::after {
left: auto;
right: -70px;
border-left: 20px solid #791;
border-right: 30px solid transparent;
transform: rotate(5deg);
}
#media (max-width: 475px) {
.banner {
min-height: 90px;
line-height: 45px;
}
.banner::before,
.banner::after {
border-width: 45px;
border-right-width: 30px;
}
.banner::after {
border-left-width: 30px;
border-right-width: 45px;
}
}
<h1 class="banner"><span>A Simple CSS Banner</span></h1>
You can simply use Media queries and adapt Width and margin.
something like:
media (max-width: 475px) {
.banner{
width: 200px;
margin:100px -100px;
}
}
This way you keep the top and bottom margin:
left: 0; right: 0;
margin: 100px auto;
If you want to center an absolute or fixed element you should :
position: absolute;
left: 0%;
right:0%;
margin: 0 auto;
This question already has an answer here:
How to use css triangle with after pseudo element and lower z-index?
(1 answer)
Closed 5 years ago.
I need to create a page using CSS triangle. My concern is that I can only use :after.
Image
Need CSS for this
HTML:
<div class="logo">
<!--<div class="down"></div>-->
</div>
CSS:
.logo {
background-image: url("https://cdn0.iconfinder.com/data/icons/small-n-
flat/24/678110-sign-info-128.png");
width:124px;
height: 131px;
float: left;
margin-left: 290px;
margin-top: 30px;
margin-bottom: 93px;
z-index: 10 !important;
position: relative;
/*margin-right: 160px;*/
}
.logo::after {
content: '';
border-left: 80px solid transparent;
border-right: 80px solid transparent;
border-top: 80px solid white;
position: absolute;
width: 0;
height: 0;
top: 90px;
left: -15px;
/*top: 120px;
left: 275px;*/
clear: both;
/*transform-origin: 0 100%;
transform: rotate(45deg);*/
/*margin-top: 90px;
margin-left: 0px;*/
z-index: 0 !important;
}
I want logo should be display above the triangle.
Thats because z-index is applied to logo class both the times which is the same class you need to remove z-index from .logo and add -ve z-index to .logo::after.
.logo {
background-image: url("https://cdn0.iconfinder.com/data/icons/small-n-flat/24/678110-sign-info-128.png");
width:124px;
height: 131px;
float: left;
margin-left: 290px;
margin-top: 30px;
margin-bottom: 93px;
position: relative;
/*margin-right: 160px;*/
}
.logo::after {
content: '';
border-left: 80px solid transparent;
border-right: 80px solid transparent;
border-top: 80px solid white;
position: absolute;
width: 0;
height: 0;
top: 90px;
left: -15px;
/*top: 120px;
left: 275px;*/
clear: both;
/*transform-origin: 0 100%;
transform: rotate(45deg);*/
/*margin-top: 90px;
margin-left: 0px;*/
z-index: -1;
}
Here is a working link : https://jsfiddle.net/qk5u45Lv/
One more alternative:
HTML:
<div class="logo"><span>i</span></div>
Apply this css:
.logo {
background: #3498db none repeat scroll 0 0;
border-radius: 100%;
box-shadow: 0 5px 0 #2980b9;
height: 100px;
width: 100px;
text-align:center;
position:relative;
}
.logo > span {
color: #fff;
font-family: -moz-fixed;
font-size: 82px;
font-weight: 600;
text-align: center;
text-shadow: 1px 3px 1px #000;
}
.logo::after {
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 50px solid #f00;
bottom: -45px;
content: "";
height: 0;
left: 0;
position: absolute;
width: 0;
z-index: -1;
}
OUPUT:
For more go this link
Hope this will help you!!!
Let me know if there is any query.
Is it possible to create a shape like this using the CSS border?
I saw some other stack overflow posts regarding making some border modifications, but nothing specifically like this. Can someone point me in the right direction?
Thanks
Based on https://css-tricks.com/examples/ShapesOfCSS/:
#base {
background: red;
display: inline-block;
height: 30px;
margin-left: 20px;
margin-top: 55px;
position: relative;
width: 200px;
text-align: center;
}
#base:before {
border-bottom: 15px solid red;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
content: "";
height: 0;
left: 0;
position: absolute;
top: -15px;
width: 0;
}
<div id="base"><span>BACK TO TOP</span></div>
Just modify the width and height for your needs, it is really easy.
You can create this shape using css :before and :after selectors:
#back {
background: #fff;
border:1px solid #333;
display: inline-block;
height: 20px;
margin-left: 20px;
margin-top: 55px;
position: relative;
width: 120px;
text-align: center;
}
#back:before {
border-bottom: 15px solid #fff;
border-left: 60px solid transparent;
border-right: 60px solid transparent;
content: "";
height: 0;
left: 0;
position: absolute;
top: -15px;
width: 0;
z-index:2;
}
#back:after {
border-bottom: 15px solid #333;
border-left: 60px solid transparent;
border-right: 60px solid transparent;
content: "";
height: 0;
left: 0;
position: absolute;
top: -16px;
width: 0 ;
z-index:1;
}
<div id="back"><span>Back to Top</span></div>
Fully adaptive and transparent...
* {
margin: 0;
padding: 0;
}
body {
position: relative;
width: 100vw;
height: 100vh;
background-image: linear-gradient(rgba(0, 0, 0, .7) 0, rgba(0, 0, 0, .7) 100%), url('http://beerhold.it/1024/600');
background-repeat: no-repeat;
background-size: cover;
}
.border-arrow-top {
display: inline-block;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
color: white;
text-align: center;
font-size: 6vh;
text-transform: uppercase;
padding: 0 10vw;
padding-bottom: 2vh;
border: 3px solid white;
border-top: none;
position: relative;
}
.border-arrow-top:before,
.border-arrow-top:after {
content: '';
position: absolute;
top: 0%;
border-top: 3px solid white;
width: 50%;
}
.border-arrow-top:before {
left: 0;
transform-origin: -3px -50%;
/* x-coord: -[size of border] */
transform: skewy(-10deg);
}
.border-arrow-top:after {
right: 0;
transform-origin: calc(100% + 3px) -50%;
/* x-coord: 100% + size of border */
transform: skewy(10deg);
}
<div class="border-arrow-top">
Back to Top
</div>
I had written a tutorial for the same, arrow heads and triangles with CSS which can be read here: http://time2hack.com/2014/10/triangles-and-arrow-heads-css.html.
The trick works on the basis of borders and their colors. The direction in which arrow has to point; border of that side can be 0 and rest of the sides will create the arrow head.
The main role will be of opposite side border; if arrow has to point to top, border-bottom will create the arrow and rest can be transparent and if arrow has to point to bottom, the border-top will be of some color and other will be transparent. Similar is for arrow pointing left and right.
The transparent color will work fine in all browser except IE8 and below; for this you can set the color to the matching background, so that it is not visible.
By customizing the fiddle http://jsfiddle.net/95Xq8/ The given below is the output
Check the fiddle
.arrow-wrap{ width:125px; margin:auto; padding:100px 0;}
.arrow-button {
width: 125px;
height: 50px;
line-height: 50px;
position: relative;
background: #f00;
text-align: center; text-decoration:none; color:#000; display:block;
color:#fff;
}
.arrow-tip {
display: block;
width: 101px;
height: 115px;
margin: 0;
-webkit-transform: rotate(45deg) skew(-18deg,-23deg);
}
.arrow-tip-container {
display: block;
width: 125px;
height: 40px;
position: absolute;
top: -40px;
left: 0px;
overflow: hidden;
}
.arrow-tip-grad {
display: block;
width: 100%;
height: 100%;
background: red;
}
<div class="arrow-wrap">
<a href="#" class="arrow-button">Back to top
<span class="arrow-tip-container">
<span class="arrow-tip">
<span class="arrow-tip-grad"></span>
</span>
</span>
</a>
</div>
I've been trying to get this container box into my webpage with html and css.
but I can't seem to get it working properly, could anyone help me out with it?
I dont have any code at the moment, since I've only been copy and pasting tutorials and trying to figure out how it works, but I cant seem to get it right.
Use pseudo elements
Update with shadow
:root{background: #c7c7c7; padding: 80px;}
div{
background: white;
width: 280px;
height: 480px;
position: relative;
margin: 0px auto
}
div:before, div:after{
content: "";
position: absolute;
background: #f2f2f2
}
div:before{
left: 100%;
width: 40px;
height: 100%;
top: 0;
top: 20px;
transform: skew(0deg,45deg);
box-shadow: 2px 1px 1px 0px #9D9C9C, 0 2px 2px #f2f2f2;
}
div:after{
top: 100%;
width: 100%;
height: 40px;
left: 20px;
transform: skew(45deg,0deg);
box-shadow: -2px 2px 1px 0px #9D9C9C, 8px 0 16px #f2f2f2
}
<div><div/>
Update without shadow
:root{background: #c7c7c7; padding: 80px;}
div{
background: white;
width: 280px;
height: 480px;
position: relative;
margin: 0px auto
}
div:before, div:after{
content: "";
position: absolute;
background: #f2f2f2
}
div:before{
left: 100%;
width: 40px;
height: 100%;
top: 0;
top: 20px;
transform: skew(0deg,45deg);
}
div:after{
top: 100%;
width: 100%;
height: 40px;
left: 20px;
transform: skew(45deg,0deg);
}
<div><div/>
Old Update
:root{background-color: #c7c7c7; height: 100vh}
main{
width: calc(100vw - 100px);
height: 120vh;
margin: 20px;
background: white;
position: relative
}
main:before, main:after{
position: absolute;
content: "";
}
main:before{
height: calc(100% - 40px);
width: 50px;
background: #f2f2f2;
right: -50px;
top: 40px
}
main:after{
height: 0;
width: 0;
top: 0;
right: -50px;
border-top: 40px solid transparent;
border-bottom: 0px solid transparent;
border-left: 50px solid #f2f2f2;
}
<main></main>
Or Shadow
:root{background-color: #c7c7c7; height: 100vh}
main{
width: calc(100vw - 100px);
height: 120vh;
margin: 20px;
background: white;
position: relative;
box-shadow: 50px 0 #f2f2f2;
}
main:before{
position: absolute;
content: "";
width: 0;
height: 0;
border-right: 50px solid #c7c7c7;
border-bottom: 50px solid transparent;
right: -50px;
top: 0;
}
<main></main>