Apply a CSS Properties to HTML Code to Achieve Bor

2019-08-25 07:36发布

站内问答 / Html5
805 1 4

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 the inside gradient in the left border and the border radius inside the box.

This is an image of the PDF that I am trying to re-create.

SurforSigEvents

I have managed to achieve most of it with the following below code.

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: 0px 7px 14px #000000;
        }
        
        h1::before,
        h1::after {
            content: "";
            display: inline-block;
            width: 70%;
            margin: 0 .5em 0 -55%;
            vertical-align: middle;
            border-bottom: 1px solid #000000;
        }
        
        h1:after {
            margin: 0 -55% 0 .5em;
        }
        
        .ml-250 {
            width: 970px;
            margin: 10px 0px 10px 250px;
            border-left: 75px solid;
            border-top: 15px solid #1c6799;
            border-bottom: 15px solid #0d3251;
            border-radius: 30px 30px 30px 30px;
            -moz-border-radius: 30px 30px 30px 30px;
            -webkit-border-radius: 30px 30px 30px 30px;
        }
        
        .ml-125 {
            width: 970px;
            margin: 10px 0px 10px 125px;
            border-left: 75px solid;
            border-top: 15px solid #1c6799;
            border-bottom: 15px solid #0d3251;
            border-radius: 30px 30px 30px 30px;
            -moz-border-radius: 30px 30px 30px 30px;
            -webkit-border-radius: 30px 30px 30px 30px;
        }
        
        #winter {
            display: table;
            table-layout: fixed;
        }
        
        #winter::before {
            content: "WINTER";
            color: #ffffff;
            display: table-cell;
            transform: translateX(-50px);
            vertical-align: middle;
            font-size: 1.75rem;
            word-break: break-all;
            width: 0.7rem;
            text-align: center;
            font-weight: 700;
        }
<link href="https://www.w3schools.com/w3css/4/w3.css" rel="stylesheet"/>
<body>
    <h1>2017 Surface Force Significant Events</h1>
    <div id="winter" class="ml-250">
        <div class="w3-row">
            <div class="w3-twothird">
                <table class="">
                    <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>
            <div class="w3-third">
                <table>
                    <tbody>
                        <tr>
                            <td><img src="https://dummyimage.com/140x110.jpg" /></td>
                            <td><img src="https://dummyimage.com/140x110.jpg" /></td>
                        </tr>
                        <tr>
                            <td><img src="https://dummyimage.com/140x110.jpg" /></td>
                            <td><img src="https://dummyimage.com/140x110.jpg" /></td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</body>

标签： html5 css3
举报
1条回答
forever°为你锁心
2楼-- · 2019-08-25 08:36

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: 0px 14px 28px #000000;
        }
        
        h1::before,
        h1::after {
            content: "";
            display: inline-block;
            width: 70%;
            margin: 0 .5em 0 -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 .5em 0 -55%;
            vertical-align: middle;
            border-left: 1.0px dashed #000000;
        }
        
        .ml-250 {
            width: 970px;
            margin: 10px 0px 10px 250px;
        }
        
        .ml-125 {
            width: 970px;
            margin: 10px 0px 10px 125px;
        }
        
        #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: 50px 30px 30px 50px;
            -moz-border-radius: 50px 30px 30px 50px;
            -webkit-border-radius: 50px 30px 30px 50px;
        }
        
        #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: 50px 0px 0px 50px;
            -moz-border-radius: 50px 0px 0px 50px;
            -webkit-border-radius: 50px 0px 0px 50px;
        }
        
        .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>
    <div id="vert-dash">
        <div class="hoz-dash">
            <div id="winter" class="ml-250">
                <div class="w3-row lft-pos-10">
                    <div class="w3-twothird">
                        <table class="">
                            <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>
                    <div class="w3-third">
                        <table>
                            <tbody>
                                <tr>
                                    <td><img src="https://dummyimage.com/150x130.jpg" /></td>
                                    <td><img src="https://dummyimage.com/150x130.jpg" /></td>
                                </tr>
                                <tr>
                                    <td><img src="https://dummyimage.com/150x130.jpg" /></td>
                                    <td><img src="https://dummyimage.com/150x130.jpg" /></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <div class="hoz-dash">
            <div id="spring" class="ml-125">
                <div class="w3-row lft-pos-10">
                    <div class="w3-twothird">
                        <table class="">
                            <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>
                    <div class="w3-third">
                        <table>
                            <tbody>
                                <tr>
                                    <td><img src="https://dummyimage.com/150x130.jpg" /></td>
                                    <td><img src="https://dummyimage.com/150x130.jpg" /></td>
                                </tr>
                                <tr>
                                    <td><img src="https://dummyimage.com/150x130.jpg" /></td>
                                    <td><img src="https://dummyimage.com/150x130.jpg" /></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <div class="hoz-dash">
            <div id="summer" class="ml-250">
                <div class="w3-row lft-pos-10">
                    <div class="w3-twothird">
                        <table class="">
                            <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>
                    <div class="w3-third">
                        <table>
                            <tbody>
                                <tr>
                                    <td><img src="https://dummyimage.com/150x130.jpg" /></td>
                                    <td><img src="https://dummyimage.com/150x130.jpg" /></td>
                                </tr>
                                <tr>
                                    <td><img src="https://dummyimage.com/150x130.jpg" /></td>
                                    <td><img src="https://dummyimage.com/150x130.jpg" /></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <div class="hoz-dash">
            <div id="fall" class="ml-125">
                <div class="w3-row lft-pos-10">
                    <div class="w3-twothird">
                        <table class="">
                            <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>
                    <div class="w3-third">
                        <table>
                            <tbody>
                                <tr>
                                    <td><img src="https://dummyimage.com/150x130.jpg" /></td>
                                    <td><img src="https://dummyimage.com/150x130.jpg" /></td>
                                </tr>
                                <tr>
                                    <td><img src="https://dummyimage.com/150x130.jpg" /></td>
                                    <td><img src="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 .

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)