CSS Гладкие границы вокруг двух коробок разного размера

Question

Мне интересно, возможно ли это сделать. Границы моего клиента, как это примерно на странице подтверждения заказа.

Я использую семантический интерфейс для этого сайта, код для сетки/сегментов:

<div class="ui grid"> 
     <div class="eleven wide computer eleven wide tablet sixteen wide mobile column"> 
      <div class="ui top attached header"> 
       <h3>Large box</h3> 
      </div> 
      <div class="ui bottom attached segment"> 
       ... 
      </div> 
     </div> 
     <div class="five wide computer four five tablet sixteen wide mobile column"> 
      <div class="ui top attached header"> 
       <h3>Small box</h3> 
      </div> 
      <div class="ui bottom attached segment"> 
       ... 
      </div> 
     </div> 
    </div> 

Любые идеи, как сделать границы, как это?

Answer 1

Вы можете ввести два div одного и того же размера и дать им границу и радиус границы. Только проблема в углу, где оба divs совпадают, не будет никакого пограничного радиуса.

.back{position:absolute;border:10px solid green;border-radius:10px;} 
 
.front{margin:10px;position:absolute;background:white; border:1px solid black;} 
 
.big{top:0;left:0;width:200px;height:200px;} 
 
.small{top:0;left:200px;width:100px;height:100px;}

<div class="big back"></div> 
 
<div class="small back"></div> 
 
<div class="big front"></div> 
 
<div class="small front"></div>

Answer 2

вы можете использовать окно-тень и немного отрицательных полей для перекрытия краев:

(This flex version вдохновлен http://codepen.io/gc-nomade/pen/HKEpo)

h3, 
 
p { 
 
    margin: 0; 
 
    padding: 5px; 
 
} 
 
.ui.grid { 
 
    margin: 1em; 
 
    display: flex; 
 
    padding: 0; 
 
} 
 
.ui.grid .eleven { 
 
    flex: 11; 
 
} 
 
.ui.grid .five { 
 
    flex: 5; 
 
} 
 
.ui.top, 
 
.ui.bottom { 
 
    border: 1em solid white; 
 
    box-shadow: -3px -3px green, inset 0 0 2px; 
 
    border-radius: 5px 0 0 0; 
 
    background: white; 
 
    position: relative; 
 
    z-index: 1; 
 
} 
 
.ui.top { 
 
    border-bottom: 0; 
 
} 
 
.ui.bottom { 
 
    border-top: 0; 
 
    box-shadow: -3px 3px green, 3px 3px green, inset 0 0 2px; 
 
    margin-top: -6px; 
 
    border-radius: 0 0 5px 5px; 
 
} 
 
.column + .column .ui.bottom { 
 
    box-shadow: 3px 3px green, inset 0 0 2px; 
 
    position: relative; 
 
} 
 
.column + .column .ui.bottom:after { 
 
    content: ''; 
 
    position: absolute; 
 
    margin: 1em; 
 
    padding: 4px; 
 
    top: 100%; 
 
    left: -2em; 
 
    background: white; 
 
    border-radius: 50%; 
 
    box-shadow: inset 3px 3px green, -3px -3px white 
 
} 
 
.column + .column .ui.top { 
 
    border-radius: 0 5px 0 0; 
 
    z-index: 0; 
 
    box-shadow: 3px -3px green, -9px -3px green, inset 0 0 2px; 
 
}

<div class="ui grid"> 
 
    <div class="eleven wide computer eleven wide tablet sixteen wide mobile column"> 
 
    <div class="ui top attached header"> 
 
     <h3>Large box</h3> 
 
    </div> 
 
    <div class="ui bottom attached segment"> 
 
     <p>Hinc ceteri particulas arripere conati suam quisque videro voluit afferre sententiam. Quae in controversiam veniunt, de iis, si placet, disseramus. An vero, inquit, quisquam potest probare, quod perceptfum, quod. Huius, Lyco, oratione locuples, 
 
     rebus ipsis ielunior. Pudebit te, inquam, illius tabulae, quam Cleanthes sane commode verbis depingere solebat. Illum mallem levares, quo optimum atque humanissimum virum, Cn. Nisi autem rerum natura perspecta erit, nullo modo poterimus sensuum 
 
     iudicia defendere. Atque ab his initiis profecti omnium virtutum et originem et progressionem persecuti sunt. Gerendus est mos, modo recte sentiat.</p> 
 
     <p>Hinc ceteri particulas arripere conati suam quisque videro voluit afferre sententiam. Quae in controversiam veniunt, de iis, si placet, disseramus. An vero, inquit, quisquam potest probare, quod perceptfum, quod. Huius, Lyco, oratione locuples, 
 
     rebus ipsis ielunior. Pudebit te, inquam, illius tabulae, quam Cleanthes sane commode verbis depingere solebat. Illum mallem levares, quo optimum atque humanissimum virum, Cn. Nisi autem rerum natura perspecta erit, nullo modo poterimus sensuum 
 
     iudicia defendere. Atque ab his initiis profecti omnium virtutum et originem et progressionem persecuti sunt. Gerendus est mos, modo recte sentiat.</p> 
 
     <p>Hinc ceteri particulas arripere conati suam quisque videro voluit afferre sententiam. Quae in controversiam veniunt, de iis, si placet, disseramus. An vero, inquit, quisquam potest probare, quod perceptfum, quod. Huius, Lyco, oratione locuples, 
 
     rebus ipsis ielunior. Pudebit te, inquam, illius tabulae, quam Cleanthes sane commode verbis depingere solebat. Illum mallem levares, quo optimum atque humanissimum virum, Cn. Nisi autem rerum natura perspecta erit, nullo modo poterimus sensuum 
 
     iudicia defendere. Atque ab his initiis profecti omnium virtutum et originem et progressionem persecuti sunt. Gerendus est mos, modo recte sentiat.</p> 
 
     <p>Hinc ceteri particulas arripere conati suam quisque videro voluit afferre sententiam. Quae in controversiam veniunt, de iis, si placet, disseramus. An vero, inquit, quisquam potest probare, quod perceptfum, quod. Huius, Lyco, oratione locuples, 
 
     rebus ipsis ielunior. Pudebit te, inquam, illius tabulae, quam Cleanthes sane commode verbis depingere solebat. Illum mallem levares, quo optimum atque humanissimum virum, Cn. Nisi autem rerum natura perspecta erit, nullo modo poterimus sensuum 
 
     iudicia defendere. Atque ab his initiis profecti omnium virtutum et originem et progressionem persecuti sunt. Gerendus est mos, modo recte sentiat.</p> 
 
     <p>Hinc ceteri particulas arripere conati suam quisque videro voluit afferre sententiam. Quae in controversiam veniunt, de iis, si placet, disseramus. An vero, inquit, quisquam potest probare, quod perceptfum, quod. Huius, Lyco, oratione locuples, 
 
     rebus ipsis ielunior. Pudebit te, inquam, illius tabulae, quam Cleanthes sane commode verbis depingere solebat. Illum mallem levares, quo optimum atque humanissimum virum, Cn. Nisi autem rerum natura perspecta erit, nullo modo poterimus sensuum 
 
     iudicia defendere. Atque ab his initiis profecti omnium virtutum et originem et progressionem persecuti sunt. Gerendus est mos, modo recte sentiat.</p> 
 
    </div> 
 
    </div> 
 
    <div class="five wide computer four five tablet sixteen wide mobile column"> 
 
    <div class="ui top attached header"> 
 
     <h3>Small box</h3> 
 
    </div> 
 
    <div class="ui bottom attached segment"> 
 
     <p>Hinc ceteri particulas arripere conati suam quisque videro voluit afferre sententiam. Quae in controversiam veniunt, de iis, si placet, disseramus. An vero, inquit, quisquam potest probare, quod perceptfum, quod. Huius, Lyco, oratione locuples, 
 
     rebus ipsis ielunior. Pudebit te, inquam, illius tabulae, quam Cleanthes sane commode verbis depingere solebat. Illum mallem levares, quo optimum atque humanissimum virum, Cn. Nisi autem rerum natura perspecta erit, nullo modo poterimus sensuum 
 
     iudicia defendere. Atque ab his initiis profecti omnium virtutum et originem et progressionem persecuti sunt. Gerendus est mos, modo recte sentiat.</p> 
 
    </div> 
 
    </div> 
 
</div>

Примечание: это работает до тех пор, пока колонка 2 короче: (