Hide part of rounded border with css - html

I have rounded border around div with a hidden part like in image below. It has to be display: flex and should not move around.
I tried adding only bot and left border, and creating top border with div, but the rounding is a bit off. Any suggestions would be welcomed here, thanks.
EDIT: i only need to hide border, inside of the div should be visible


You can use pseudo elements to achieve this. You may need to position them according to your layout and content
#border {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
word-wrap: break-word;
position: absolute;
border-left: solid 2px black;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
height: 250px;
width: 400px;
}
#border::before {
content:"";
position: absolute;
top: 0px;
left: -1px;
height: 5px;
width: 150px;
border-top: solid 2px black;
border-top-left-radius: 5px;
}
#border::after {
content:"";
position: absolute;
top: 244px;
left: -2px;
width: 300px;
height: 5px;
border-bottom: solid 2px black;
border-bottom-left-radius: 5px;
}
<div id="border">
<p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</p>
<p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</p>
<p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</p>
</div>

Related

How to display the timeline using CSS

I am creating a timeline but it's not displaying my design output. I have to display the first child after the image and next child before image with a full underline. I tried but my underline not displaying proper even image is not display the right way
Would you help me out in this?
I need a output like this.
.timeline ul li {
list-style-type: none;
position: relative;
width: 6px;
margin: 0 auto;
padding-top: 50px;
/* background: #fff;*/
border-right: 2px solid #ff0000;
}
.timeline ul li::after {
content: '';
position: absolute;
left: 50%;
bottom: 0;
transform: translateX(-50%);
width: 30px;
height: 30px;
background: inherit;
}
.timeline ul li:nth-child(odd),
.timeline ul li:nth-child(even){
width:50%;
float:left;
clear:right;
text-align:right;
position:relative;
}
.timeline ul li:nth-child(even){
width:50%;
float:right;
clear:left;
text-align:left;
position:relative;
}
.timeline ul li:nth-child(odd):after,
.timeline ul li:nth-child(even):before{
background: url('https://image.flaticon.com/icons/png/512/67/67347.png') no-repeat;
width: 24px;
height: 20px;
background-size: 100% 100%;
}
<div class="timeline">
<ul>
<li>Lorem ipsum dolor sit amet, consectetu</li>
<li>Lorem ipsum dolor sit amet, consectetu</li>
<li>Lorem ipsum dolor sit amet, consectetu</li>
<li>Lorem ipsum dolor sit amet, consectetu</li>
<li>Lorem ipsum dolor sit amet, consectetu</li>
<li>Lorem ipsum dolor sit amet, consectetu</li>
<li>Lorem ipsum dolor sit amet, consectetu</li>
<li>Lorem ipsum dolor sit amet, consectetu</li>
<li>Lorem ipsum dolor sit amet, consectetu</li>
<li>Lorem ipsum dolor sit amet, consectetu</li>
<li>Lorem ipsum dolor sit amet, consectetu</li>
</ul>
</div>

This is not perfect or dynamic but it will get you on the right path.
use nth-child(odd/even) to select every second row
li:nth-child(odd) {
float: left;
border-right: thick solid #ff0000;
margin: 0px;
padding-right: 20px;
background-image: url('https://image.flaticon.com/icons/png/512/67/67347.png');
background-repeat: no-repeat;
background-size: 20px 20px;
background-position-x: 254px;
background-position-y: 18px;
}
li:nth-child(even) {
float: right;
border-left: thick solid #ff0000;
margin-right: 186px;
padding-left: 20px;
background-image: url('https://image.flaticon.com/icons/png/512/67/67347.png');
background-repeat: no-repeat;
background-size: 20px 20px;
background-position-y: 18px;
}
ul{
list-style: none;
}
li{
padding: 20px 0 0 0;
}
div{
width: 777px;
}
img{
width: 20px;
}
<div class="timeline">
<ul>
<li>
Lorem ipsum dolor sit amet, consectetu
</li>
<li>
Lorem ipsum dolor sit amet, consectetu
</li>
<li>
Lorem ipsum dolor sit amet, consectetu
</li>
<li>
Lorem ipsum dolor sit amet, consectetu
</li>
<li>
Lorem ipsum dolor sit amet, consectetu
</li>
</ul>
</div>

here is my solution :
jsFiddle
.timeline ul li {
list-style-type: none;
position: relative;
width: 6px;
margin: 0 auto;
padding-top: 50px;
/* background: #fff;*/
}
.timeline ul li:nth-child(odd) {
border-right: 2px solid #ff0000;
}
.timeline ul li:nth-child(even) {
border-left: 2px solid #ff0000;
}
.timeline ul li::after {
content: '';
position: absolute;
left: 50%;
bottom: 0;
transform: translateX(-50%);
width: 30px;
height: 30px;
background: inherit;
}
.timeline ul li:nth-child(odd){
width:50%;
float:left;
clear:right;
text-align:right;
position:relative;
}
.timeline ul li:nth-child(even){
width:49.7%;
float:right;
clear:left;
text-align:left;
position:relative;
}
.timeline ul li:nth-child(odd):after,
.timeline ul li:nth-child(odd):before{
background: url('https://image.flaticon.com/icons/png/512/67/67347.png') no-repeat;
width: 24px;
height: 20px;
background-size: 100% 100%;
}
<div class="timeline">
<ul>
<li>Lorem ipsum dolor sit amet, consectetu</li>
<li>Lorem ipsum dolor sit amet, consectetu</li>
<li>Lorem ipsum dolor sit amet, consectetu</li>
<li>Lorem ipsum dolor sit amet, consectetu</li>
<li>Lorem ipsum dolor sit amet, consectetu</li>
<li>Lorem ipsum dolor sit amet, consectetu</li>
<li>Lorem ipsum dolor sit amet, consectetu</li>
<li>Lorem ipsum dolor sit amet, consectetu</li>
<li>Lorem ipsum dolor sit amet, consectetu</li>
<li>Lorem ipsum dolor sit amet, consectetu</li>
<li>Lorem ipsum dolor sit amet, consectetu</li>
</ul>
</div>

You can change a part of CSS as below: Jsfiddle
.timeline ul li:nth-child(1), .timeline ul li:nth-child(2n+1){
width: 50%;
float: left;
clear: right;
text-align: right;
position: relative;
border-right: 5px inset black; //border
left: -5px; //alignment
}
.timeline ul li:nth-child(2n){
width: 50%;
float: right;
clear: left;
text-align: left;
position: relative;
border-left: 5px inset black; //border
}

There are a couple of thing missing or wrong with your code.
You applied the border on both the divs on the same side. I fixed this by giving them both a different border.
To make sure the border was included within the size of the element I used box-sizing: border-box;.
As with some of the other answers they became jagged so I applied a width to the element of 50% - half the border size i.e. width: calc(50% - 1px). This should always result in a straight line.
You never made sure the actual :before would be displayed. So i applied the same rules for the :after to the :before.
Gave the li a small padding so it wouldn't be stuck to the border, resulting in some space for the image.
The code below should work the way you intended. As for margins and padding, you are ofcourse free to adjust them to your needs.
.timeline ul li {
list-style-type: none;
position: relative;
width: calc(50% + 1px);
margin: 0 auto;
padding-top: 50px;
box-sizing: border-box;
}
.timeline ul li::after, .timeline ul li::before {
position: absolute;
transform: translateX(-50%);
width: 24px;
height: 20px;
content: '';
}
.timeline ul li:nth-child(odd){
float:left;
clear:right;
text-align:right;
border-right: 2px solid #ff0000;
padding-right: 2em;
}
.timeline ul li:nth-child(even){
float:right;
clear:left;
text-align:left;
border-left: 2px solid #ff0000;
padding-left: 2em;
}
.timeline ul li:nth-child(odd):after{
background: url('https://image.flaticon.com/icons/png/512/67/67347.png') no-repeat;
background-size: 100% 100%;
right: -5px;
}
.timeline ul li:nth-child(even):before{
background: url('https://image.flaticon.com/icons/png/512/67/67347.png') no-repeat;
background-size: 100% 100%;
left: 20px;
}
<div class="timeline">
<ul>
<li>Lorem ipsum dolor sit amet, consectetu</li>
<li>Lorem ipsum dolor sit amet, consectetu</li>
<li>Lorem ipsum dolor sit amet, consectetu</li>
<li>Lorem ipsum dolor sit amet, consectetu</li>
<li>Lorem ipsum dolor sit amet, consectetu</li>
<li>Lorem ipsum dolor sit amet, consectetu</li>
<li>Lorem ipsum dolor sit amet, consectetu</li>
<li>Lorem ipsum dolor sit amet, consectetu</li>
<li>Lorem ipsum dolor sit amet, consectetu</li>
<li>Lorem ipsum dolor sit amet, consectetu</li>
<li>Lorem ipsum dolor sit amet, consectetu</li>
</ul>
</div>

Css - Draw rectangle with rounded corners as background

Is any ways to make this figure with only html & css?

Almost the same solution as #pedram, but using pseudo element in order to avoid inverse skewing the content inside the div (if there will be a content) :
div.content {
width: 200px;
height: 200px;
position:relative;
padding:20px;
box-sizing:border-box;
}
div.content:before {
content:"";
position:absolute;
background: #ff8f00;
border-radius: 15px;
transform: skew(-5deg);
top:0;
left:0;
right:0;
bottom:0;
z-index:-1;
]
<div class="content">
lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume
</div>

You should use transform skew like below, and your shape called Parallelogram
div {
width: 200px;
height: 200px;
background: #ff8f00;
border-radius: 15px;
transform: skew(-5deg); /* OR transform: skew(-190deg); */
position: relative;
left: 20px;
top: 10px;
}
<div>
</div>

"Read More" link, in an HTML Newsletter

I want to insert in my HTML newsletter a link "Read more ... " that expand/hide my news inside of my email with more info (more text). How can I do this to work on Microsoft Outlook.
I know how to do that on a web page using CSS (code mentioned below) but on an email this doesn't work.
HTML:
<p class="read-more-wrap">
lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum.
<span class="read-more-target">hidden lorem ipsum hidden lorem ipsum hidden lorem ipsum hidden lorem ipsum hidden lorem ipsum.</span>
</p>
<label for="post-1" class="read-more-trigger"></label>
CSS:
.read-more-state {
display: none;
}
.read-more-target {
opacity: 0;
max-height: 0;
font-size: 0;
transition: .25s ease;
}
.read-more-state:checked ~ .read-more-wrap .read-more-target {
opacity: 1;
font-size: inherit;
max-height: 999em;
}
.read-more-state ~ .read-more-trigger:before {
content: 'Show more';
}
.read-more-state:checked ~ .read-more-trigger:before {
content: 'Show less';
}
.read-more-trigger {
cursor: pointer;
display: inline-block;
padding: 0 .5em;
color: #666;
font-size: .9em;
line-height: 2;
border: 1px solid #ddd;
border-radius: .25em;
}

Here is the easiest solution I could think of:
CSS:
#mycheckbox:checked ~ .moretext {
display: block;
}
.moretext{
display: none;
}
#mycheckbox{
display: none;
}
.showmore{
cursor: pointer;
}
HTML:
<input type="checkbox" id="mycheckbox" />
<label for="mycheckbox" class="showmore">Toggle more</label>
<div class="moretext" >Some more text</div>
Demo: https://jsfiddle.net/behxbd0t/

HTML/CSS line break when text overflows container

On my website, the Lorem Ipsum text overflows the container. How can I automatically add a line break when the text reaches its container's borders.
I have created this JSFiddle to demonstrate my issue.
HTML:
<body>
<div id="wrapper">
<div id="content">
<div class="flex">
<div class="flexchild">
<img src="img.jpg" width="200"></img>
</div>
<div class="flexchild">
<p>
Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.
</p>
</div>
</div>
</div>
</div>
</body>
CSS
body,html {
background: #fff;
width: 90%;
margin-left: auto;
margin-right: auto;
height: 100%;
}
#wrapper{
background: #ccc;
height: 100%;
}
.flex {
width: 100%;
height: 340px;
display: -webkit-box;
display: flex;
}
.flexchild {
-webkit-flex: 1 0 auto;
flex: 1 0 auto;
overflow: auto;
display: block;
}

You need to use 0 instead of auto:
.flexchild {
-webkit-flex: 1 0 0;
flex: 1 0 0;
overflow: auto;
display: block;
}
See this JSFiddle, or run the code snippet below.
body,
html {
background: #fff;
width: 90%;
margin-left: auto;
margin-right: auto;
height: 100%;
}
#wrapper {
background: #ccc;
height: 100%;
}
.flex {
width: 100%;
height: 340px;
display: -webkit-box;
display: flex;
}
.flexchild {
-webkit-flex: 1 0 0;
flex: 1 0 0;
overflow: auto;
display: block;
}
<body>
<div id="wrapper">
<div id="content">
<div class="flex">
<div class="flexchild">
<img src="http://www.engraversnetwork.com/files/placeholder.jpg" width="200"></img>
</div>
<div class="flexchild">
<p>Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.</p>
</div>
</div>
</div>
</div>
</body>
Further Reading:
MDN Documentation for flex-basis, the third parameter of flex

I'm not familiar with the css flex bits but removing these 2 lines makes the text flow as you want.
-webkit-flex: 1 0 auto;
flex: 1 0 auto;

IE z-index issue with iframe

I'm having a Youtube video iframe cover the whole window (100% width and height) and i have the rest of the elements scroll over the video.
Everything works fine on Chrome and Firefox but IE doesn't seem to respond to z-index.
I've created a jsFiddle here http://jsfiddle.net/RickyStam/42tLS/ where you can see the problem.
HTML
<div class="page-container">
<div>
<div class="header">
<img src="Images/logo.png" />
<div class="menu-container">
<ul>
<li>solutions</li>
<li>about us</li>
<li>contact</li>
</ul>
</div>
<div class="clear"></div>
</div>
<div class="video-container">
<iframe class="video-player" src="//www.youtube.com/embed/7x8BCbo45qA?autoplay=0&showinfo=0&controls=0" wmode="Opaque" frameborder="0" allowfullscreen></iframe>
<div class="video-container-text">
<h1 class="regularfonts">LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM</h1>
<p>LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM</p>
</div>
</div>
</div>
<div style="width: 100%; height: 685px; z-index: 12"></div>
<div class="aboutus-container">
<h1>ABOUT US</h1>
<p>LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUMLOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM</p>
<p>
LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM<br />
LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM
</p>
<p>LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM</p>
</div>
</div>
CSS
.page-container {
width: 100%;
}
.header {
background: black;
height: 80px;
width: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 11;
}
.video-container {
position: fixed;
top: 0;
width: 100%;
height: 100%;
z-index: -1;
text-align: center;
}
.video-player {
width: 100%;
height: 100%;
}
.video-container-text {
position: absolute;
top: 0px;
width: 100%;
height: 100%;
background-image: url('../Images/check_black.png');
padding-top: 200px;
box-sizing: border-box;
}
.video-container-text h1 {
font-size: 18px;
padding: 20px 30px;
background-image: url('../Images/check_black.png');
border-left: 2px solid #cf0103;
border-right: 2px solid #cf0103;
display: inline-block;
}
.aboutus-container {
height: 270px;
background: #292929;
text-align: center;
position: relative;
z-index: 10;
}
.aboutus-container h1 {
font-size: 25px;
display: inline-block;
margin-top: 45px;
margin-bottom: 20px;
}
Any help will be much appreciated!

I manage to find the answer i had to add to the src of iframe &wmode=opaque
Here is the complete iframe :
<iframe class="video-player" src="//www.youtube.com/embed/7x8BCbo45qA?autoplay=0&showinfo=0&controls=0&wmode=opaque" wmode="Opaque" frameborder="0" allowfullscreen></iframe>