DrawはHTML</p> <p><a href="https://i.stack.imgur.com/JQKiW.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/JQKiW.png" alt="enter image description here"></a></p> <p>以下、私がこれまで試したどのようなコードであるに私は（画像の下）形状をコーディングする必要がHTML＆CSS

Question

を使用して、カスタム形状の内側境界線を破線

body { 
 
    font: 13px Verdana; 
 
} 
 

 
h3 { 
 
    height: 100px; 
 
    background: #72bbab; 
 
    border-radius: 50px 10px 10px 50px; 
 
    display: flex; 
 
    margin-top: 50px; 
 
    position: relative; 
 
    line-height: 100px; 
 
    color: #ffffff; 
 
    font-size: 13px; 
 
    font-weight: normal; 
 
} 
 

 
h3 i { 
 
    width: 130px; 
 
    height: 130px; 
 
    transform: translateY(-15px); 
 
    background: #71bbab; 
 
    border-radius: 50%; 
 
    position: relative; 
 
    margin-right: 20px; 
 
} 
 

 
h3:before { 
 
    content: ""; 
 
    position: absolute; 
 
    border: 1px dashed #fff; 
 
    top: 5px; 
 
    bottom: 5px; 
 
    left: 20px; 
 
    right: 2px; 
 
    border-radius: 10px; 
 
} 
 

 
h3 i:before { 
 
    content: ""; 
 
    position: absolute; 
 
    top: 5px; 
 
    bottom: 5px; 
 
    left: 5px; 
 
    right: 5px; 
 
    border: 1px dashed #fff; 
 
    border-radius: 50%; 
 
}

<h3><i></i>Text</h3>

今の問題は、私が右サイドからの円の点線の境界線を削除することはできませんしています。私はborder-top:0とborder-right:0を試しましたが、うまくいきませんでした。事前に

おかげ

注：h3要素の::after擬似を使用した画像の任意の王

Answer 1

あなたが同じHTML mark-upを保つことによって、出力を取得する必要がある場合は、あなたが取得するh2 tag widthと多くのそのようなpropertiesを計算するために多くのpseudo selectors、CSS calc() functionを使用する必要がありますCSSを使用して出力します。

positionとz-indexを使用して、h2 tagの円の枠の裏を隠すこともできません。マージンを使用すると、残りの部分を手配することができます。そのため、ある時点で、ダイアグラム全体が接続されます。

body { 
 
    font: 13px Verdana; 
 
} 
 

 
h3{ 
 
    background:#72bbab; 
 
    width:calc(100% - 95px); 
 
    height:85px; 
 
    margin-left:95px; 
 
    margin-top:21px; 
 
    display:flex; 
 
    justify-content:flex-start; 
 
    align-items:center; 
 
    border-top-right-radius:10px; 
 
    border-bottom-right-radius:10px; 
 
    padding-left:20px; 
 
    box-sizing:border-box; 
 
    color:#fff; 
 
} 
 
h3 i{ 
 
    width:120px; 
 
    height:120px; 
 
    background:#72bbab; 
 
    border-radius:50%; 
 
    display:inline-block; 
 
    top:2px; 
 
    left:2px; 
 
    position:absolute; 
 
    z-index:-1; 
 
    overflow:hidden; 
 
} 
 
h3 i:before{ 
 
    content:""; 
 
    width:100px; 
 
    height:100px; 
 
    border:2px dashed #fff; 
 
    position:absolute; 
 
    top:8px; 
 
    left:8px; 
 
    border-radius:50%; 
 
} 
 
h3:before{ 
 
    content:""; 
 
    width:calc(100% - 120px); 
 
    height:65px; 
 
    border:2px dashed #fff; 
 
    position:absolute; 
 
    right:15px; 
 
    border-top-right-radius:10px; 
 
    border-bottom-right-radius:10px; 
 
} 
 
h3:after{ 
 
    content:""; 
 
    width:3px; 
 
    height:68px; 
 
    background:#72bbab; 
 
    position:absolute; 
 
    top:28px; 
 
    margin-left:-61px; 
 
}

<h3><i></i>Text</h3>

Answer 2

を使用する必要はありません。

h3:after { 
    z-index: 9999; 
    position:absolute; 
    max-width: 100%; 
    width: 100px; 
    height: 87px; 
    background: #71bbab; 
    content: ''; 
    left: 35px; 
    margin-top: 6px; 
} 

https://jsfiddle.net/apyupfwo/

Answer 3

このことができますかどうかを確認します。

https://jsfiddle.net/induprakash/8ofLjqxm/

Iは境界を長方形に高いZインデックスを追加しました。

body { 
    font: 13px Verdana; 
} 

h3 { 
    height: 100px; 
    background: #72bbab; 
    border-radius: 50px 10px 10px 50px; 
    display: flex; 
    margin-top: 50px; 
    position: relative; 
    line-height: 100px; 
    color: #ffffff; 
    font-size: 13px; 
    font-weight: normal; 
} 

h3 i { 
    width: 130px; 
    height: 130px; 
    transform: translateY(-15px); 
    background: #71bbab; 
    border-radius: 50%; 
    position: relative; 
    margin-right: 20px; 
} 

h3:before { 
    content: ""; 
    position: absolute; 
    border: 1px dashed #fff; 
    top: 5px; 
    bottom: 5px; 
    left: 105px; 
    z-index: 10; 
    right: 2px; 
    border-radius: 0px; 
    border-left: 0; 
} 

h3 i:before { 
    content: ""; 
    position: absolute; 
    top: 5px; 
    bottom: 5px; 
    left: 5px; 
    right: 5px; 
    border: 1px dashed #fff; 
    border-radius: 50%; 
border-right : 1px solid #72bbab; 
} 

Answer 4

この画像は画像ごとに表示されます。私は単純で異なるアプローチを試みました。

JSFiddleリンク - https://jsfiddle.net/deepak104080/uwx873x1/

.circle { 
 
    width:130px; 
 
    height:130px; 
 
    border-radius:65px; 
 
    position:absolute; 
 
    z-index:100; 
 
    background:#71bbab; 
 
    margin:0px; 
 
    padding:0px; 
 
} 
 
.innercircle { 
 
    width:110px; 
 
    height:110px; 
 
    border-radius:55px; 
 
    position:absolute; 
 
    top:9px; 
 
    left:9px; 
 
    z-index:100; 
 
    background:#71bbab; 
 
    border: 1px dashed #fff; 
 
} 
 

 
.tab { 
 
    height: 100px; 
 
    position:absolute; 
 
    margin-top:15px; 
 
    margin-left:105px; 
 
    z-index:1000; 
 
    width:350px; 
 
    background:#71bbab; 
 
    border-top-right-radius:10px; 
 
    border-bottom-right-radius:10px; 
 
} 
 
.innertab { 
 
    height: 78px; 
 
    position:absolute; 
 
    margin-top:10px; 
 
    margin-left:0px; 
 
    z-index:1000; 
 
    width:340px; 
 
    background:#71bbab; 
 
    border-top-right-radius:10px; 
 
    border-bottom-right-radius:10px; 
 
    border-top: 1px dashed #fff; 
 
    border-bottom: 1px dashed #fff; 
 
    border-right: 1px dashed #fff; 
 
}

<div> 
 
<div class="circle"> 
 
    <div class="innercircle"> 
 
    
 
    </div> 
 
</div> 
 

 
<div class="tab"> 
 
    <div class="innertab"> 
 

 
</div> 
 
</div> 
 
</div>