Im looking for css code for below shape, i have tried using border radius but have to work with different div's for top border and left curve.
Im looking for css which draws complete shape below. Any help ?
.Curve{
top: 25px;
left: 25px;
width: 50px;
border: solid 1px #4C5D65;
height: 86px;
content: " ";
padding: 0px;
position: absolute;
transform: rotate(271deg);
border-color: transparent transparent #4C5D65 transparent;
border-radius: 0 0 51px 99%/44px;
}
<span class="Curve"> </span>
Here is what i have tried
https://jsfiddle.net/sonymax46/wdaLomnf/3/
Here is an idea with one element. Simply adjust the gradient until you get what you want.
.curve {
width:100px;
height:50px;
border-top:2px solid;
background:
radial-gradient(100% 57% at left,transparent calc(100% - 2px),#000,transparent 100%)
left/15px 100% no-repeat;
}
<div class="curve"></div>
Another idea:
.curve {
width:100px;
height:50px;
border-top:2px solid;
position:relative;
overflow:hidden;
}
.curve:before {
content:"";
position:absolute;
width:80px;
height:80px;
border-radius:50%;
top:calc(50% - 40px);
right:calc(100% - 12px);
border:2px solid;
box-sizing:border-box;
}
<div class="curve"></div>
Maybe change
border-color: transparent transparent #4C5D65 transparent; to
border-color: #4C5D65 transparent #4C5D65 transparent;
or add an element above, make the margins of both equal to zero, and then make the bottom border the same colour.
Hope this help you.
.Curve {
top: 25px;
left: 25px;
width: 50px;
border: solid 1px #4C5D65;
height: 86px;
content: " ";
padding: 0px;
position: absolute;
transform: rotate(271deg);
border-color: transparent transparent #4C5D65 transparent;
border-radius: 0 0 51px 99%/44px;
}
span.Curve:after {
position: absolute;
content: '';
height: 100%;
width: 100%;
border-right: 1px solid #21262D;
top: 92%;
left: -6px;
/* background: rebeccapurple; */
}
<span class="Curve"></span>
Related
I have image and I want to make it look like 3D. It should be looking like this:
How can I do this? I tried box-shadow but it didn't look like real 3d.
border with gradient can do it:
img {
border-style: solid;
border-width: 0px 15px 15px 0px;
border-image-slice: 0 15 15 0; /* same as border-width*/
border-image-source: linear-gradient(45deg, transparent 10px, grey 0 calc(100% - 10px), transparent 0);
}
body {
background: pink;
}
<img src="https://picsum.photos/id/1069/300/200">
like below if you want different coloration for a better 3D rendring:
img {
--t:15px;
border-right: var(--t) solid grey;
border-bottom:var(--t) solid #626161;
clip-path:polygon(0 0,calc(100% - var(--t)) 0,100% var(--t),100% 100%,var(--t) 100%,0 calc(100% - var(--t)));
}
body {
background: pink;
}
<img src="https://picsum.photos/id/1069/300/200">
This is yet another approach: use before and after pseudo-elements with transform.
.whatever
{
display: block;
width: 100px;
height: 100px;
background: url("https://picsum.photos/100/100");
}
.whatever::before
{
content:"";
background-color: gray;
position:relative;
display: block;
transform: skewX(45deg);
top: 100px;
left: 5px;
width: 100px;
height: 10px;
}
.whatever::after
{
content:"";
background-color: gray;
position:relative;
display: block;
transform: skewY(45deg);
left: 100px;
top: -4px;
width: 10px;
height: 100px;
}
<div class="whatever"></div>
I'm developing a responsive web application, and need to create 2 separate content areas as follows,
So far, I tried,
border-right: 30px solid transparent;
border-bottom: 30px solid #4c4c4c;
height: 100%;
width: 100%;
position: fixed;
But, unfortunately couldn't create a triangle.
Is there any other way to create a triangle using CSS with the possibility to wrap content entirely within the div's besides using the border property?
Any help would be greatly appreciated.
I believe you are looking for triangles with borders and a transparent cut in between (which none of the existing answers seem to address) and so here is an example. It's absolutely possible to achieve with but takes a lot of hacking around.
Using CSS Transforms:
The below snippet uses pseudo-elements and transforms to produce the triangles effect. The output is responsive but the usage of skew transforms mean that if the container's shape becomes a rectangle then the skew angles would need modification and more tweaking of the positioning attributes etc.
.container {
position: relative;
overflow: hidden;
height: 200px;
width: 200px;
}
.div-1,
.div-2 {
position: absolute;
top: 0px;
left: 0px;
height: 100%;
width: 100%;
overflow: hidden;
}
.div-1 {
top: calc(-100% - 5px);
transform: skewY(45deg);
transform-origin: left top;
border-bottom: 2px solid;
}
.div-1:after {
position: absolute;
content: '';
height: calc(100% - 2px);
width: calc(100% - 2px);
top: calc(100% + 7px);
left: 0px;
transform: skewY(-45deg);
transform-origin: left top;
border: 1px solid;
}
.div-2 {
top: 5px;
transform: skewY(45deg);
transform-origin: left bottom;
border-top: 1px solid;
}
.div-2:after {
position: absolute;
content: '';
height: calc(100% - 7px);
width: calc(100% - 7px);
top: 0px;
left: 0px;
transform: skewY(-45deg);
transform-origin: left bottom;
border: 1px solid;
}
* {
box-sizing: border-box;
}
/* just for demo */
.container{
transition: all 1s;
}
.container:hover{
width: 400px;
height: 400px;
}
body{
background: radial-gradient(circle at center, aliceblue, mediumslateblue);
min-height: 100vh;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class='container'>
<div class='div-1'></div>
<div class='div-2'></div>
</div>
Using Gradients:
Another approach would be to use a couple of linear gradients as background images like in the below snippet. But there are plenty of drawbacks here too. (1) Gradients have very poor browser support at present. (2) Angular gradients tend to produce jagged lines which would need smoothing. (3) You had specifically mentioned 2 div elements in the image in question and I presume you want content within them, in which case that would need extra work.
.container {
position: relative;
overflow: hidden;
height: 200px;
width: 300px;
background: linear-gradient(to top right, transparent calc(50% + 2px), black calc(50% + 2px), black calc(50% + 4px), transparent calc(50% + 4px)), linear-gradient(to bottom left, transparent calc(50% + 2px), black calc(50% + 2px), black calc(50% + 4px), transparent calc(50% + 4px)) ;
}
.container:before{
position: absolute;
content: '';
height: calc(100% - 6px);
width: calc(100% - 6px);
left: 4px;
border-top: 2px solid black;
border-right: 2px solid black;
}
.container:after{
position: absolute;
content: '';
height: calc(100% - 6px);
width: calc(100% - 6px);
top: 4px;
border-left: 2px solid black;
border-bottom: 2px solid black;
}
/* just for demo */
.container{
transition: all 1s;
}
.container:hover{
width: 700px;
height: 400px;
}
body{
background: radial-gradient(circle at center, aliceblue, mediumslateblue);
min-height: 100vh;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class='container'>
</div>
Using SVG:
All these lead me to my suggestion, which is, to use SVG for creating such shapes. They are easy to create using just path elements, easily maintainable and are responsive by nature.
.container {
position: relative;
height: 300px;
width: 200px;
}
svg {
position: absolute;
top: 0px;
left: 0px;
height: 100%;
width: 100%;
}
svg path {
fill: transparent;
stroke: black;
}
/* just for demo */
.container {
transition: all 1s;
}
.container:hover {
height: 400px;
width: 700px;
}
body {
background: radial-gradient(circle at center, aliceblue, mediumslateblue);
min-height: 100vh;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class='container'>
<svg viewBox='0 0 100 100' preserveAspectRatio='none'>
<path d='M4,2 L98,2 98,96 4,2z M2,4 L2,98 96,98 2,4z' vector-effect='non-scaling-stroke' />
</svg>
</div>
Note: With any of the approaches mentioned above (or those given in other answers), you cannot make the content to remain within the boundaries of those triangles. Text can be placed upon them but the text cannot be contained within those boundaries unless the CSS Shapes module's shape-inside property is fully implemented.
Just don't give width and height will make triangle.
.triangle1 {
border-right: 30px solid transparent;
border-bottom: 30px solid #4c4c4c;
position: fixed;
}
Working Fiddle
As per your image here i have created two reverse triangle.
.triangle1 {
border-right: 100px solid transparent;
border-bottom: 100px solid #4c4c4c;
position: fixed;
}
.triangle2 {
border-left: 100px solid transparent;
border-top: 100px solid #4c4c4c;
position: fixed;
margin-left: 3px;
}
<div class="triangle1">
</div>
<div class="triangle2">
</div>
Edit:
Here is one way you can add text inside triangle.
Add another text div inside triangle and set it's position.
Fiddle
.triangle1 {
width: 0;
height: 0;
border-left: 0px solid transparent;
border-right: 200px solid transparent;
border-bottom: 150px solid black;
}
For DIV Element 1. For the second just make a square and render the triangle on the top of the square.
Html code :
<div id="DIV-Element1"></div>
<div id="DIV-Element2"></div>
Css :
#DIV-Element1 { width: 0; height: 0; border-bottom: 100px solid black; border-right: 100px solid transparent; }
#DIV-Element2 { width: 0; height: 0; margin-left: 15px;border-top: 100px solid black; border-left: 100px solid transparent; }
you can adjust your triangle by changing border
I hope this will work
I'm trying to make some kind of "triangular ornament" bar with html/css. Can you please tell me how to make such?
Here is the image :
Thanks in advance
I have made this by mixing two triangles and a rectangle see if this is what you want http://jsfiddle.net/xkwbt73v/5/
HTML
<div id="triangle-left"></div>
<div id="triangle-left-down"></div>
<div id="bar"></div>
CSS
#triangle-left {
width: 0;
height: 0;
border-top: 100px solid red;
border-left: 100px solid transparent;
}
#triangle-left-down {
width: 0;
height: 0;
border-bottom: 100px solid red;
border-left: 100px solid transparent;
}
#bar{
width:1000px;
height:200px;
background-color:red;
position:absolute;
margin-left:100px;
margin-top:-200px;
}
If you want to do it using one element then have a look at Pseudo-elements - CSS | MDN
HTML:
<figure></figure>
DEMO 1 using Background-image
figure{
width:320px;
height:64px;
background:blue;
position:relative;
margin:40px auto;
}
figure:before{
content: '';
position: absolute;
left: -60px;
width: 100px;
height: 100%;
background-image: linear-gradient(32deg, transparent 50%, blue 0%),linear-gradient(147deg, transparent 50%, blue 0%);
}
DEMO 2 using 2 elements
CSS:
figure{
width:320px;
height:64px;
background:blue;
position:relative;
margin:40px auto;
}
figure:before, figure:after{
content:'';
position:absolute;
display:block;
left: -40px;
width:0;
height:0;
border-left: 40px solid transparent;
border-right: 0px solid transparent;
}
figure:before{
top: 0;
border-top: 32px solid blue;
}
figure:after{
bottom: 0;
border-bottom: 32px solid blue;
}
http://jsfiddle.net/5p4yLrz4/ :)
HTML:
<div class="wrapper">
<div class="triangle"></div>
</div>
CSS:
.wrapper{
width:300px;
background-color:orange;
}
.triangle {
width:0;
border-width: 30px;
border-right:0px;
border-color: transparent transparent transparent yellow;
border-style: solid;
}
Hi I have done a speech bubble but I want to get the background image to come into the arrow as well. I did find some examples as well but editing them to fit my needs is confusing because I cant position the arrow to the place I want it to be in the end.
.bubble {
position: relative;
width: 227px;
height: 310px;
background-color:white !important;
background: url(../images/thepartypeople/assets/main-bg.png) repeat 0 0;
}
.bubble:after {
content: "";
position: absolute;
top: 128px;
left: -15px;
border-style: solid;
border-width: 15px 15px 15px 0;
border-color: transparent #000;
display: block;
width: 0;
z-index: 1;
}
This is my code that I have for my speech bubble.
Any help would be appriciated
Thanks alot.
Here is the question answered elsewhere
Creating a transparent arrow above image in CSS3
But, I'll give you the HTML and CSS for your specific answer. I changed your HTML a little bit by the way.
<div class="bubble">
<img class="test" src="http://placekitten.com/241/310" alt="kitten" />
</div>
You can keep it with just the div .bubble and have background: url('http://placekitten.com/241/310'); but the image would have to be exactly the height and width of the div.
.bubble {
position:relative;
width:241px;
height: 310px;
}
.bubble:before, .bubble:after {
content:'';
position:absolute;
width:0;
border-left:15px solid white;
left:0;
}
.bubble:before {
top:0;
height:128px;
border-bottom:15px solid transparent;
}
.bubble:after {
top:143px;
bottom:0;
border-top:15px solid transparent;
}
.test {
display:block;
width:100%;
}
Here is a fiddle http://jsfiddle.net/WUXQd/2/ the fiddle has comments in it explaining a bit how it works.
EDIT: By the way this creates a mask around the image and two reverse triangles to make it look like there is a transparent triangle.
is this similar to what you wanted?
.bubble {
position: relative;
width: 250px;
height: 120px;
padding: 0px;
background: #FFFFFF;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
background: url(border.jpg) repeat 0 0;
}
.bubble:after {
content: "";
position: absolute;
top: 45px;
left: -15px;
border-style: solid;
border-width: 15px 15px 15px 0;
border-color: transparent #FFFFFF;
display: block;
width: 0;
z-index: 1;
border-image: url(border.jpg);
}
EDIT: This link can help you: http://www.sitepoint.com/pure-css3-speech-bubbles/
I need some trick to insert border blank space by using CSS like this..
I using CSS box-shadow like this
box-shadow:
-1px 0px 0px 0px #000,
0px -1px 0px 0px #000,
0px 1px 0px 0px #000,
1px 1px 0px 0px #000
I have no idea how to make border / shadow look like the picture.
I will use only one html element.. <div></div>
Any trick ?
Playground : http://jsfiddle.net/ES66k/
with one div only: http://jsfiddle.net/ES66k/1/ (tested on Fx18 and chrome)
div {
width:300px;
height:170px;
margin:100px;
border-top: 1px black solid;
border-bottom: 1px black solid;
position: relative;
}
div:after, div:before {
content: "";
position: absolute;
top: -1px;
width: 20px;
height: 172px;
border-top: 40px white solid;
border-bottom: 40px white solid;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
div:before { border-left: 1px black solid; left: 0; }
div:after { border-right: 1px black solid; right: 0; }
It's bit hacky, anyway, since it's relying on a fixed height and on a solid color as background (white) but maybe could be useful for your purpose.
You can create 4 <div>'s with classes .top-left, .top-right, .bottom-left and .bottom-right. Make them absolute and the container relative. Size them, make them the color of the containers bg-color and get them to the corners with top, right, bottom and left properties. Their value must be minus the border width.
Here is example of element with 3px border:
HTML:
<div class="box">
<div class="corner top-left"></div>
<div class="corner top-right"></div>
<div class="corner bottom-left"></div>
<div class="corner bottom-right"></div>
</div>
CSS:
.box{
width: 300px;
height: 300px;
border: 3px solid #666;
position:relative;
}
.corner{
width: 10px;
height: 10px;
background-color: #fff;
position: absolute;
}
.top-left{
top: -3px;
left: -3px;
}
.top-right {
top: -3px;
right: -3px;
}
.bottom-left{
bottom: -3px;
left: -3px;
}
.bottom-right{
bottom: -3px;
right: -3px;
}
Try to use the CSS3 attribute border-image:
Here's a demo you can have a look and try out yourself: CSS3 border-image
div {
width:300px;
height:170px;
margin:100px;
position:relative;
background:#ccc;
}
div:before, div:after {
content:"";
position:absolute;
top:0;
left:0;
}
div:before {
width:280px; /*****-20px*****/
height:168px; /*****-2px*****/
margin-left:10px;
border-top:1px solid #f00;
border-bottom:1px solid #f00;
}
div:after {
width:298px; /*****-2px*****/
height:150px; /*****-20px*****/
margin-top:10px;
border-left:1px solid #f00;
border-right:1px solid #f00;
}
Demo : http://jsfiddle.net/ES66k/4/
Done now, Don't need to set background-color :D
But thanks #Fabrizio Calderan anyway :D