image description here
I need to make a div like this.
I made it in clip-path, but the problem is that I have to insert the content into div (some text) that came out of div barrier, if anyone has a solution how to get a diagonal border (top, left), I would be grateful
you can use skew :
.diagonal-border {
width: 200px;
height: 200px;
transform: skew(-20deg);
background-color: lightgray;
overflow: hidden;
}
.diagonal-border p {
transform: skew(20deg);
padding: 10px;
}
<div class="diagonal-border">
<p>Content goes here</p>
</div>
an idea for the diagonal border ,
<html>
<head>
<style>
div{
border-bottom: 1px solid red;
width: 50%;
transform: rotate(45deg);
transform-origin: top left;
}
</style>
</head>
<body>
<h2>A simple diagonal Line:</h2>
<div></div>
</body>
</html>
you can use this example to impliment the diagonal borders
and, I can share with you some links that used to use when I started the journey in frontend development you can use and it will save some of your time
https://fonts.google.com/icons
https://fonts.google.com/ fonts
https://htmlcheatsheet.com/css/
https://htmlcheatsheet.com/
https://mixkit.co/ free stack vedio ncc
https://www.freeformatter.com/html-formatter.html code formatter - the best tools for a good code making
-JD
Related
Hi im a newbie in designing website i just want to ask how can i achieve this without using images ? please check this image thanks what im trying to accomplish is the black box with that kind of shape
Html + css
<div class="box side">
</div>
.box.side {
background-color: #131313;
height: 100vh
}
This should help you get started:
Basically, you create a div block then rotate it a little bit, with margin and transform-origin you can make it fit the window (search online if you don't know how to use those attribute)
You also need a container which is block, width 100% and overflow hidden, otherwise, you will see a rotated div block.
.box.side {
margin-top: 48vh;
height: 48vh;
}
.container {
display: block;
width: 100%;
overflow: hidden;
}
.slope {
margin: 0 -100px;
transform-origin: right center;
background: black;
transform: rotate(-2deg);
}
<div class="container">
<div class="box side slope">
</div>
</div>
Hey I don't know how to make perpendicularly text in Html i tried this:
<head>
<style>
body {
transform: rotate(90deg);
transform-origin: left top 0;
background-color: red
}
</style>
</head>
<body>Hello World!</body>
But it just made red background color.
Can you help me ?
I think you DID achieve it, but pushed it off-canvas...
Update: After comment I am also demonstrating a -90 degree transform. Note that the superfluous positioning rules (especially "bottom") come about from having two paragraphs. But the point is that when you rotate something it can end up on canvas without some extra positioning.
body {
background-color: red
}
p.ninety {
transform: rotate(90deg);
transform-origin: left top 0;
position: relative;
left: 20px;
}
p.minusninety {
transform: rotate(-90deg);
transform-origin: left top 0;
position: relative;
left: 40px;
bottom: -78px;
}
<body>
<p class="ninety">Hello World!</p>
<p class="minusninety">I'm getting dizzy!</p>
</body>
Mate, don't do that affecting to body directly.
Make a class, for example 'vertical-container' and then apply the style there.
<head>
<style>
body .vertical-container {
transform: rotate(90deg);
transform-origin: left top 0;
background-color: red
}
</style>
</head>
<body>
<div class="vertical-container" > Hello World! </div>
</body>
Edit: Remember then that it element will have some inherited properties from the parent (body in this case) since it's relative positioned for default. So you could need 'play' with sizes ultil you have what you really want. For example giving a body height:100%, width:100% if what you want is full screen content.
I have 2 divs. Right div is an image cutted diagonally. Left divs must have some text inside. I want this to be fully responsive like this:
The problem occurs when I change window size, it's collapsing like in the image:
.
Also there is a text on left div that need to be displayed, but with flex this seems not to work so i disabled it. Please provide solution for this.
Here is my css and html:
#diagonal {
display: flex;
width: 100%;
}
#diagonal #ct-about-col-left {
width: 60%;
border-right: 190px solid transparent;
border-bottom: 500px solid grey;
z-index: 2;
}
#diagonal span {
display: none;
}
#ct-about-col-right {
height: 500px;
width: 50%;
border: 2px solid;
background-image: url(images/content/about/right-col-image.jpg);
z-index: 0;
margin-left: -12%;
margin-right: 0;
}
}
<div id="diagonal">
<div id="ct-about-col-left">
<span>We are the best</span>
<span>text1 text1 text1</span>
<span>Text2 text2 text2 text2</span>
<div>
<span>Read more</span>
</div>
</div>
<div id="ct-about-col-right"></div>
</div>
Maybe consider a slightly different mark-up and method of adding the picture (as a background-image) and making the angle (with transform: skew).
Live Demo: http://codepen.io/anon/pen/rjyKRo
<div class="container">
<div class="caption">
<p>CONTENT</p>
</div>
</div>
* { box-sizing: border-box; }
.container {
width: 100%;
height: 50vh;
overflow: hidden;
background-image: url("http://unsplash.it/600");
background-size: cover;
background-repeat: no-repeat;
background-position: 100% 50%;
}
.caption {
height: 100%;
width: 50%;
min-width: 500px;
padding-top: 20%;
padding-left: 130px;
background-color: #ddd;
transform: skew(10deg, 0deg);
transform-origin: 100% 100%;
}
.caption p {
transform: skew(-10deg, 0deg);
}
May I suggest another approach which will save You some markup space and CSS rules as well.
Simply create a full-width div with the ID of lets say ct-about, give it a background color grey and then simply chain the image background on top of the color like so:
background: url('images/content/about/right-col-image.jpg') no-repeat right top, grey;
This simply tells the browser, make my box grey and put that image over the grey color. The no-repeat right top properties are preventing the browser from repeating the image so you don't get a tile, tell ti to place the image on the far right and top positions.
This way everything will be responsive as well.
Here is a Fiddle for You to better understand.
You can find more information about multiple CSS backgrounds in the Mozilla Developer Network
I'm using a slight hack to have diagonal borders between sections on my page (because I couldn't find a different way to make it work), which consists of having a super thick border added to the 'border' divs. It's fine on computers but on phones (all the ones I've tested on) the divs holding the thick borders stick out and you can scroll horizontally into 'empty space' on the page, only seeing the borders sticking out. Does anyone know how to stop this, or suggest a different way to create the diagonals?
The page is responsive and fills the browser window, that's why I needed a huge border size to be sure it'll be there even on HD displays...
.border-black-white {
border-color: transparent transparent #fff #2d2d2d ;
border-width: 0 0 60px 2600px;
border-style: solid;
}
.border-yellow-white {
border-color: transparent transparent #fff transparent ;
border-width: 0 0 60px 2600px;
border-style: solid;
}
section {
width: 80%;
margin: 0 auto;
padding: 3em 10%;
}
Here is a fiddle with all the code: http://jsfiddle.net/UnX72/
Thank you!
Update: I already tried overflow: hidden (or overflow-x:hidden) and it didn't work.
Well i think is not possible to hide the overflow created by a border not even on desktop browsers or at least not in any of the ones i have installed, i've tried a similar approach than yours to test this and also got the same problem, so i think is better to do it with out using borders, so i created a div and placed another one (with a pseudo element) and rotate to get the same effect, so my guess is that this should work just right for what you want, if not at least i hope it gives you another option.
Here is the jsfiddle Demo
Html
<section>
<div>
<p> Section 1</p>
</div>
</section>
<div class="diagonal">
</div>
<section>
<div>
<p> Section 2</p>
</div>
</section>
<div class="diagonal"></div>
<section>
<div>
<p> Section 3</p>
</div>
</section>
<div class="diagonal"></div>
Css
section {
width: 80%;
margin: 0 auto;
padding: 3em 10%;
background: red;
overflow:hidden;
}
.diagonal{
width: 100%;
height: 50px;
overflow: hidden;
position: relative;
}
.diagonal:after{
content: '';
height: 40px;
background: black;
display: block;
position: absolute;
top: -39px;
left: -5px;
width: 200%;
transform: rotate(7deg);
-ms-transform: rotate(7deg);
-webkit-transform: rotate(-2deg);
}
Here you can check the compatibility of the rotate property
http://caniuse.com/transforms2d
Note:
Depending on the size of the container the "diagonal" will need to be offseted to the right position, you can do so using media queries, or javascript.
I've searched a whole bunch but couldn't find anything that was coming close to it..
I want to have a horizontal line that has an image centered in it..
What's the best way of achieving this with the HR tag or any different way?
This is the image that I want to use: http://www.dylanvanheugten.nl/images/logo.png
Thanks in advance!
This might get you started:
HTML:
<div class="line">
<span class="logo"></span>
</div>
CSS:
.logo {
position: absolute;
left: 50%;
top: 50%;
margin-left: -25px;
margin-top: -25px;
padding: 0 5px;
height: 50px;
width: 50px;
background: #fff url(http://www.dylanvanheugten.nl/images/logo.png) no-repeat 50% 50%;
}
.line {
position: relative;
overflow: visible;
height: 1px;
background-color: #ddd;
border: 1px solid #ddd;
}
Here's a fiddle you can play with: http://jsfiddle.net/4tZLD/1/
You can refer to this article. Maybe you can find a solution that covers all the browsers (or at least the ones you care about):
http://www.sovavsiti.cz/css/hr.html
I think that you want something like this, if I understood right.
http://jsfiddle.net/9yjmU/
HTML:
<div class="image">
<img src="http://www.dylanvanheugten.nl/images/logo.png"/>
</div>
<div class="line">
</div>
CSS:
.image{
text-align: center;
}
.line{
border-top: 1px solid black;
margin-top: -20px;
}
You can see that I used a div with a border-top and a margin-top: -20px; so it's in the center of the image (which looks 40px; height).
HTML:
<div class="line">
<img src="http://www.dylanvanheugten.nl/images/logo.png" class="lineImg">
</div>
CSS:
.line {
border-bottom: 1px solid black;
text-align:center;
height:17px;
margin-bottom:17px;
}
.lineImg {
background-color:white;
padding:0px 5px 0px 5px;
}
see: http://jsfiddle.net/V5wj6/3/
the height and margin-bottom of .line need to be exaclty half the height of img, this way, the image will be vertically centered on the line and the following content wont be directly under the border.
in the .lineImg style the background-color makes it look better by removing the line underneath the img, and the padding gives it some more space, you will have to adjust the background-color to your page
This, hopefully, will finally deliver a simple solution to the never ending quest to centre a horizontally placed graphic and auto locate on resize. The calc() method is supported by most browsers. The below syntax uses a graphic with a 728px width.
Full width = 728px, get 50% = 364px. Then apply the following:
#imagecentre1 {
left : calc(100% / 2 - 364px);
/*rest of syntax */
}
It is important to ensure 'white space' either side of '+' and "-" this to ensure that values, both negative and positive work correctly and for the sake of continuity the practice should apply to '/' and '*'. I'm sure someone will confirm order of execution, from memory it will be +, -, x, /. Calc() has basic features, no 'auto'!!
Expect some limitations. Just give it wirl!