Skip to content Skip to sidebar Skip to footer
Home / Css / Html

Apply A Css Properties To Html Code To Achieve Border And Dashed Line From Image

Post a Comment
I have a PDF document that I am trying to re-create via HTML. The document is a list of date and events or each season. I am not sure where to apply the border properties to create

Solution 1:

you could use the container and pseudos via position:absolute/relative to draw the dashed borders : https://codepen.io/gc-nomade/pen/Kyarez

.hoz-dash {
  position:relative;/* use it as reference for absolute pseudos */
}
.hoz-dash:before,
.hoz-dash:after{/* generate the pseudos of each containers and set commun styles */content:'';
  position:absolute;
  left:50px;
  top:50%;
  border:dashed 3px gray;/* uodate border side, color and thickness to your needs */
}
.hoz-dash:before {
  width:200px;/* give it a width */
}
.hoz-dash:nth-child(even):before {
  width:75px;/* reset width for shorter ones */
}
.hoz-dash:not(:last-of-type):after {/* draw the side but not on the last one */height:100%;
}


body {
            width: 1200px;
            font-size: .9335rem
        }
        
        h1 {
            width: 95%;
            margin: .8rem auto;
            overflow: hidden;
            text-align: center;
            color: #0A3782;
            font-weight: 700;
            text-transform: uppercase;
            text-shadow: 0px14px28px#000000;
        }
        
        h1::before,
        h1::after {
            content: "";
            display: inline-block;
            width: 70%;
            margin: 0 .5em0 -55%;
            vertical-align: middle;
            border-bottom: 1px solid #000000;
        }
        
        h1:after {
            margin: 0 -55%0 .5em;
        }
        
        #vert-dash::before {
            content: "";
            display: inline-block;
            height: 70%;
            margin: 0 .5em0 -55%;
            vertical-align: middle;
            border-left: 1.0px dashed #000000;
        }
        
        .ml-250 {
            width: 970px;
            margin: 10px0px10px250px;
        }
        
        .ml-125 {
            width: 970px;
            margin: 10px0px10px125px;
        }
        
        #winter, #fall,#spring,#summer  {
            display: table;
            table-layout: fixed;
            border-left: 75px solid;
            border-top: 15px solid #1c6799;
            border-bottom: 15px solid #0d3251;
            border-radius: 50px30px30px50px;
            -moz-border-radius: 50px30px30px50px;
            -webkit-border-radius: 50px30px30px50px;
        }
        
        #winter::before,        
        #spring::before,
        #summer::before,
        #fall::before {
            content: attr(id);
          font-variant:small-caps;
            color: #ffffff;
            display: table-cell;
            transform: translateX(-50px);
            vertical-align: middle;
            font-size: 2rem;
            line-height:1.85rem;
            word-break: break-all;
            width: 2rem;
            text-align: center;
            font-weight: 700;
        }
        
        .lft-pos-10 {
            display: flex;
            align-items: center;
            position: relative;
            left: -10px;
            border-radius: 50px0px0px50px;
            -moz-border-radius: 50px0px0px50px;
            -webkit-border-radius: 50px0px0px50px;
        }
        
        .w3-twothird {
            width: 64.66666%;
        }

.hoz-dash {
  position:relative;
}
.hoz-dash:before,
.hoz-dash:after{
   content:'';
  position:absolute;
  left:50px;
  top:50%;
  border-top:dashed 4px gray;
}
.hoz-dash:before {
  width:200px;
}
.hoz-dash:nth-child(even):before {
  width:75px;
}
.hoz-dash:not(:last-of-type):after {
  height:100%;
  border-top:dashed 0 gray;
  border-left:dashed 4px gray
}
<body><h1>2017 Surface Force Highlights</h1><divid="vert-dash"><divclass="hoz-dash"><divid="winter"class="ml-250"><divclass="w3-row lft-pos-10"><divclass="w3-twothird"><tableclass=""><tbody><tr><td>01/23/17</td><td>USS Makin Island Provides Medical Assistance to Pakistani Sailor</td></tr><tr><td>02/03/17</td><td>U.S. Japan Successfully Conduct First SM-3 Block IIA Intercept Test</td></tr><tr><td>02/12/17</td><td>Navy Christens Future Tulsa</td></tr><tr><td>03/01/17</td><td>USS Dewey Fires SM-2 Missile during MISSILEX</td></tr><tr><td>03/07/17</td><td>Navy Conducts Successful Missile Test Firing</td></tr><tr><td>03/07/17</td><td>“Speed-to-Fleet” Answered the Call: Missiles On-Target “Skin to Skin”</td></tr><tr><td>03/23/17</td><td>USS Lake Erie Assists Distressed Mariners</td></tr><tr><td>03/29/17</td><td>USS Princeton Participates in Show of Force Strait Transit Exercise</td></tr><tr><td>03/31/17</td><td>Ross, Porter Conduct TLAM Strikes into Syria</td></tr></tbody></table></div><divclass="w3-third"><table><tbody><tr><td><imgsrc="https://dummyimage.com/150x130.jpg" /></td><td><imgsrc="https://dummyimage.com/150x130.jpg" /></td></tr><tr><td><imgsrc="https://dummyimage.com/150x130.jpg" /></td><td><imgsrc="https://dummyimage.com/150x130.jpg" /></td></tr></tbody></table></div></div></div></div><divclass="hoz-dash"><divid="spring"class="ml-125"><divclass="w3-row lft-pos-10"><divclass="w3-twothird"><tableclass=""><tbody><tr><td>01/23/17</td><td>USS Makin Island Provides Medical Assistance to Pakistani Sailor</td></tr><tr><td>02/03/17</td><td>U.S. Japan Successfully Conduct First SM-3 Block IIA Intercept Test</td></tr><tr><td>02/12/17</td><td>Navy Christens Future Tulsa</td></tr><tr><td>03/01/17</td><td>USS Dewey Fires SM-2 Missile during MISSILEX</td></tr><tr><td>03/07/17</td><td>Navy Conducts Successful Missile Test Firing</td></tr><tr><td>03/07/17</td><td>“Speed-to-Fleet” Answered the Call: Missiles On-Target “Skin to Skin”</td></tr><tr><td>03/23/17</td><td>USS Lake Erie Assists Distressed Mariners</td></tr><tr><td>03/29/17</td><td>USS Princeton Participates in Show of Force Strait Transit Exercise</td></tr><tr><td>03/31/17</td><td>Ross, Porter Conduct TLAM Strikes into Syria</td></tr></tbody></table></div><divclass="w3-third"><table><tbody><tr><td><imgsrc="https://dummyimage.com/150x130.jpg" /></td><td><imgsrc="https://dummyimage.com/150x130.jpg" /></td></tr><tr><td><imgsrc="https://dummyimage.com/150x130.jpg" /></td><td><imgsrc="https://dummyimage.com/150x130.jpg" /></td></tr></tbody></table></div></div></div></div><divclass="hoz-dash"><divid="summer"class="ml-250"><divclass="w3-row lft-pos-10"><divclass="w3-twothird"><tableclass=""><tbody><tr><td>01/23/17</td><td>USS Makin Island Provides Medical Assistance to Pakistani Sailor</td></tr><tr><td>02/03/17</td><td>U.S. Japan Successfully Conduct First SM-3 Block IIA Intercept Test</td></tr><tr><td>02/12/17</td><td>Navy Christens Future Tulsa</td></tr><tr><td>03/01/17</td><td>USS Dewey Fires SM-2 Missile during MISSILEX</td></tr><tr><td>03/07/17</td><td>Navy Conducts Successful Missile Test Firing</td></tr><tr><td>03/07/17</td><td>“Speed-to-Fleet” Answered the Call: Missiles On-Target “Skin to Skin”</td></tr><tr><td>03/23/17</td><td>USS Lake Erie Assists Distressed Mariners</td></tr><tr><td>03/29/17</td><td>USS Princeton Participates in Show of Force Strait Transit Exercise</td></tr><tr><td>03/31/17</td><td>Ross, Porter Conduct TLAM Strikes into Syria</td></tr></tbody></table></div><divclass="w3-third"><table><tbody><tr><td><imgsrc="https://dummyimage.com/150x130.jpg" /></td><td><imgsrc="https://dummyimage.com/150x130.jpg" /></td></tr><tr><td><imgsrc="https://dummyimage.com/150x130.jpg" /></td><td><imgsrc="https://dummyimage.com/150x130.jpg" /></td></tr></tbody></table></div></div></div></div><divclass="hoz-dash"><divid="fall"class="ml-125"><divclass="w3-row lft-pos-10"><divclass="w3-twothird"><tableclass=""><tbody><tr><td>01/23/17</td><td>USS Makin Island Provides Medical Assistance to Pakistani Sailor</td></tr><tr><td>02/03/17</td><td>U.S. Japan Successfully Conduct First SM-3 Block IIA Intercept Test</td></tr><tr><td>02/12/17</td><td>Navy Christens Future Tulsa</td></tr><tr><td>03/01/17</td><td>USS Dewey Fires SM-2 Missile during MISSILEX</td></tr><tr><td>03/07/17</td><td>Navy Conducts Successful Missile Test Firing</td></tr><tr><td>03/07/17</td><td>“Speed-to-Fleet” Answered the Call: Missiles On-Target “Skin to Skin”</td></tr><tr><td>03/23/17</td><td>USS Lake Erie Assists Distressed Mariners</td></tr><tr><td>03/29/17</td><td>USS Princeton Participates in Show of Force Strait Transit Exercise</td></tr><tr><td>03/31/17</td><td>Ross, Porter Conduct TLAM Strikes into Syria</td></tr></tbody></table></div><divclass="w3-third"><table><tbody><tr><td><imgsrc="https://dummyimage.com/150x130.jpg" /></td><td><imgsrc="https://dummyimage.com/150x130.jpg" /></td></tr><tr><td><imgsrc="https://dummyimage.com/150x130.jpg" /></td><td><imgsrc="https://dummyimage.com/150x130.jpg" /></td></tr></tbody></table></div></div></div></div></div></body>

Note, you can use the comma to separate CSS selectors when the rules to apply are similar. font-variant or font-style can be used to turn lowercase charactere into uppercase .

Post a Comment for "Apply A Css Properties To Html Code To Achieve Border And Dashed Line From Image"