질문

HTML과 CSS를 사용하여 이와 유사한 디자인을 만들어야합니다. 다른 색상과 아이콘 이미지가있는 점선 테두리가있는 것을 볼 수 있듯이 반응형으로 만들어야하므로 Bootstrap 3도 사용하고 있습니다.

그래서 이것이 내가 한 일입니다.

.content{width: 100%;position: relative;height: 800px;}
        .section01{width: 70%;float: left;height: 600px;justify-content: center;
    flex-flow: column wrap;
    display: flex;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;}
        .section02{width: 30%;float: left;height: 600px;justify-content: center;
    flex-flow: column wrap;
    display: flex;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;}
    .context h1{color: #009164;font-size: 38px}
    .context p{color: #273994;font-size: 20px;}
    .context{width: 640px;margin: 0 90px 0px auto;}
    .border_box{padding-top: 50px;padding-left: 30px;padding-bottom: 50px;width: 850px;margin: 0 90px 0px auto;position: relative;}
    .b1{position: absolute;
    top: 0px;
    border-left: 6px dotted #009164;
    border-top: 6px dotted #009164;
    height: 180px;
    width: 380px;
    border-radius: 12px;}

    .b2{position: absolute;
    bottom: 0px;
    border-left: 6px dotted #273994;
    border-bottom: 6px dotted #273994;
    height: 72px;
    width: 380px;
    border-radius: 12px;}

    .img01{position: absolute;
    width: 50px;
    height: 50px;
    bottom: 0;
    top: 62%;
    left: 10px;}

    @media (max-width: 768px){
        .section01{float: none;width: 100%;display: block;    height: auto;}
        .section02{float: none;width: 100%;display: block;    height: auto;}
        .context{width: 100%;}
        .border_box{width: 100%;}
    }

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<div class="content">
    <div class="section01">
        <div class="border_box">
            <div class="b1"></div>
            <div class="b2"></div>
            <div class="img01"><img src="https://i.imgur.com/PX9ORs5.png" class="img-responsive"></div>
            <div class="context">
                <h1>Lorem Ipsum</h1> 
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis. </p>
            </div>
        </div>
    </div>

    <div class="section02">
    <img src="https://i.imgur.com/S8mdCoO.jpg" class="img-responsive">
    </div>
</div>

Expand snippet

문제는 경계 반경을 유지하면서 시작과 마지막 과거를 어떻게 만들 수 있는지 모르겠다는 것입니다.

나는 또한 그것을 응답하려고 노력하고 있습니다.

어떻게 해결할 수 있습니까?

당신의 도움을 원합니다.

답변1

CSS에 이러한 변경 사항 추가

데모:https://codepen.io/esanazizi/pen/dyGzrzO

둥근 테두리가있는 esnezz의 펜 포크

   .b1 {
      position: absolute;
      top: 0px;
      border-left: 6px dotted #009164;
      border-top: 6px dotted #009164;
      height: 180px;
      width: 380px;
      border-top-left-radius: 12px;
    }
    
    .b2 {
      position: absolute;
      bottom: 0px;
      border-left: 6px dotted #273994;
      border-bottom: 6px dotted #273994;
      height: 72px;
      width: 380px;
      border-bottom-left-radius: 12px;
    }
    
    .b1::after {
      content: '';
      position: absolute;
      top: -81px;
      right: 0;
      border-left: 6px dotted #009164;
      height: 72px;
      width: 5px;
    }

    .b2::after {
      content: '';
      position: absolute;
      bottom: -81px;
      right: 8px;
      border-left: 6px dotted #273994;
      height: 72px;
      width: 5px;
    }

출처 : https://stackoverflow.com/questions/62617885/responsive-dotted-borders-with-icons-images-in-css