How do I crop the parts of the "Today" red div that are not on the special div in order to make it look like a bookmark? Desired result is shown on the second image.
Thank you!
Actual image:
Desired image:
Html:
<div class="panel">
<div class="special">Special $120.00</div>
<div class="pr2">Today</div>
</div>
CSS
.special {
text-align: center;
margin-top: 20px;
}
.panel {
margin-bottom: 20px;
border: 1px solid #ccc;
border-radius: 4px;
box-shadow: 0 1px 1px rgba(0,0,0,.05);
height: 70px;
}
.pr2 {
background-color: #d13a2f;
color: #ffffff;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
line-height: 35px;
text-align: center;
letter-spacing: 1px;
top: 5px;
right: -48px;
left: auto;
position: absolute;
padding-top: 20px;
width: 140px;
overflow: hidden;
display: block;
opacity: 0.6;
}
JSFiddle overlapping
Add overflow: hidden and position: relative to the .panel div:
.panel {
overflow: hidden;
position: relative;
}
Then adjust positioning values to your needs.
Updated fiddle
Related
I want to change the inside color of a css so that it looks like this:
How i want it to look
How it looks so far:
Color i want to change
I've tried many things so that it looks like that, here is my html:
<div className="forms__highlightcolor">
<p>Highlight Color</p>
<input type="color" id="colorpicker" value="#0000ff"></input>
</div>
And the CSS i've made so far:
.forms__highlightcolor > input{
background: #F1F1F1;
width: 250px;
height: 35px;
border: 1px solid #F1F1F1;
border-radius: 20px;
}
.forms__highlightcolor > input[type="color"]::-webkit-color-swatch {
border: none;
width: 0px;
border-radius: 4px;
}
I want to change the inside color, but don't know how to do it.
Here is my code I hope this may help.
First You need to separate the input section and color has code section and wrap it inside a div.
#colorpicker {
border: 0;
padding: 0;
background: unset;
width: 30px;
height: 35px;
left: -5px;
position: absolute;
}
#colorpicker:hover {
cursor: pointer;
}
.color-input-wrapper {
display: flex;
align-items: center;
position: relative;
border-radius: 57px;
overflow: hidden;
width: 200px;
height: 25px;
position: relative;
background: #fdf8f5;
}
.color-input-wrapper:hover {
cursor: pointer;
}
.hash-code-section {
margin-left: 30px;
display: flex;
align-items: center;
flex:1;
margin-right: 10px;
text-transform: uppercase;
}
.arrow {
border: solid black;
border-width: 0 3px 3px 0;
display: inline-block;
padding: 3px;
margin-left: auto;
}
.down {
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
<div className="forms__highlightcolor">
<p>Highlight Color</p>
<div class="color-input-wrapper"><input type="color" id="colorpicker" value="#FF5733"></input>
<div class="hash-code-section">#FF5733 <i class="arrow down"></i></div>
</div>
</div>
I want to make background for menu list item looks as a tab, how can this be done in CSS and to add icon beside it
CSS
#cdnavheader .activeMenuItem span {
background-position: 100% -145px;
color: #2d83ab;
padding: 12px;
background-repeat: no-repeat;
color: #fff;
background-color: #2d489b;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
You can also use a pseudo and transform:
a {
display: inline-block;/* fallback*/
position: relative;
overflow: hidden;
border-radius:5px 5px 0 0;
padding: 1em 3em 1em 2em;
}
a:before {
content: '';
position: absolute;
top: 0;
right: 0;
width: 120%;
height: 200%;
z-index: -1;
background: tomato;
border-radius:inherit;
transform: skew(35deg)
}
nav {
display: flex;
margin: 1em;
}
<nav> some link
some link
some link
</nav>
Use a zero height DIV with a big border:
.tab {
width: 100px;
height: 0px;
border-right: 20px solid transparent;
border-bottom: 20px solid green;
}
<div class="tab"></div>
More info here: https://css-tricks.com/snippets/css/css-triangle/
Considering the dark gray section is the element sitting below, how can the golden shape in the picture be drawn with css exclusively?
This is my code so far:
.Header--wrapper {
position: relative;
background-color: #42424C;
}
.Header--start-small {
width: 25%;
position: absolute;
background-color: #BCB097;
color: white;
margin-top: -10px;
margin-left: 15px;
padding-bottom: 57px;
display: inline-block;
}
<div className="Header--wrapper">
<div className="Header--start-small"></div>
</div>
Please refer blow code, I have update css and html.
.Header--wrapper {
position: relative;
background-color: #BCB097;
height: 40px;
overflow: hidden;
}
.Header--start-small {
width: 25%;
position: absolute;
background-color: #42424C;
color: white;
margin-top: -10px;
margin-left: 0px;
padding-bottom: 57px;
display: inline-block
}
.Arrow{
width: 0;
height: 0;
border-style: solid;
border-width: 20px 0 20px 10px;
border-color: transparent transparent transparent #42424c;
display: inline-block;
left: 25%;
position: absolute;
}
<div class="Header--wrapper">
<div class="Header--start-small"></div><div class="Arrow"></div>
</div>
#container {
height: 80px;
width: 300px;
background: #ebebeb;
}
#container:before {
content: " ";
display: inline-block;
width: 0;
height: 0;
border-style: solid;
border-width: 40px 0 40px 20px;
border-color: #ebebeb #ebebeb #ebebeb white;
}
<div id="container"></div>
Note that you can adjust the depth of the cut out by changing the last value in the border-width relative to the other values
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>
I want to make the following icon in CSS3 such that I can very the width and height of only ".circle" (or some other wrapper element, point is I want to adjust width and height in one place or even make it so that it automatically fits in any container regardless of width and height) without having to adjust any other CSS3 properties to make the "A" line up in the center.
What is the best way to do this? If you can recommend a better way to do the following it would be very appreciated. The issue with what I have is that changing ".circle"'s width and height to be smaller affects the positioning of the positioning of eveerything else forcing me to change .circle2's properties and .letter's properties until things line up.
CSS
.circle {
width: 100px;
height: 100px;
background: blue;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
cursor:pointer;
}
.circle2 {
width:80%;
height:80%;
border-radius: 50px;
position:relative;
top:5%;
left:5%;
border: 5px solid #FFF;
}
letter{
position:relative;
top:45%;
left:30%;
margin:auto;
cursor:pointer;
color: #fff;
font-size: 60px;
font-weight: bold;
display: inline-block;
line-height: 0px;
}
letter:before {
content: "A"
}
HTML
<div class="circle">
<div class="circle2">
<a class="letter"></a>
</div>
</div>
Have a look. The only thing that's tricky is the "A" font size. You could use a library like http://fittextjs.com/ to accomplish this fully.
http://jsfiddle.net/cSBw3/1/
Code is bellow and modified.
CSS3
.container {
width: 100px;
height: 100px;
text-align: center;
}
.circle {
width: 100%;
height: 100%;
background: blue;
cursor:pointer;
position: relative;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
}
.circle:after {
content:"";
display: block;
position: absolute;
/* width: 80%; height: 80%; */
top: 10%; bottom: 10%;
left: 10%; right: 10%;
border: 5px solid #FFF;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
}
.letter {
cursor:pointer;
display: block;
}
.letter:before {
content: "A";
display: block;
position: absolute;
bottom: 19%;
right: 19%;
font-size: 3em;
font-weight: bold;
color: #fff;
}
HTML
<div class="container">
<div class="circle">
<a class="letter"></a>
</div>
</div>