Làm thế nào để làm cho một hình chữ nhật snowboard (hoặc vắt hình chữ nhật) div trong css?

Question

Tôi đang cố gắng để có được hình dạng này: Cho đến nay tôi có this. Có cách nào để có được hiệu ứng này bằng cách sử dụng CSS không? Tôi nghĩ bán kính âm có lẽ sẽ hoạt động.

div { 
 
    display: inline-block; 
 
    padding-top: 10px; 
 
    padding-bottom: 10px; 
 
    padding-left: 10px; 
 
    min-width: 200px; 
 
    border-radius:10%/70%; 
 
    background-color: red; 
 
}

<div> 
 
    Board 
 
</div>

Answer 1

Tôi thích những thứ như thế này như tôi luôn luôn lộn xộn xung quanh để tạo ra những điều như thế này. Vì vậy, đây là cách tôi sẽ làm điều đó. Sử dụng :before và :after chúng tôi có thể tạo hình dạng này, chúng tôi sử dụng chúng để tạo hình dạng để ngồi trên đầu trang của div có cùng màu với nền. Điều này sẽ làm cho nó trông giống như hình dạng bạn muốn.

Làm cho :before và :after lớn hơn và nhỏ hơn để có được kích thước bạn muốn (thay đổi chiều rộng và chiều cao).

div { 
 
    display: inline-block; 
 
    padding-top: 10px; 
 
    padding-bottom: 10px; 
 
    padding-left: 10px; 
 
    min-width: 200px; 
 
    border-radius: 20px; 
 
    background-color: red; 
 
    position: relative; 
 
} 
 
div:before, 
 
div:after { 
 
    content: ""; 
 
    display: block; 
 
    width: 96%; 
 
    height: 20px; 
 
    border-radius: 50%; 
 
    background: #fff; 
 
    position: absolute; 
 
    margin: auto; 
 
} 
 
div:before { 
 
    top: -17px; 
 
    left: 0; 
 
    right: 0; 
 
} 
 
div:after { 
 
    bottom: -17px; 
 
    left: 0; 
 
    right: 0; 
 
}

<div>Board</div>

Answer 2

#a{position:relative;height:50px;width:100px;background-color:green;border-radius:50%;} 
 
#b{position:relative;top:-48px;left:50px;height:46px;width:100px;background-color:green;} 
 
#c{position:relative;top:-96px;left:100px;height:50px;width:100px;background-color:green;border-radius:50%;}

<div id="a"></div><div id="b"></div><div id="c"></div>

Answer 3

Something như vậy?

#board-cont{ 
 
    position: relative; 
 
    overflow: hidden; 
 
} 
 
#board-cont .board{ 
 
    display: inline-block; 
 
    padding-top: 10px; 
 
    padding-bottom: 10px; 
 
    padding-left: 10px; 
 
    width: 190px; 
 
    height: 30px; 
 
    border-radius:15%/70%; 
 
    background-color: red; 
 
} 
 
#board-cont .border-top{ 
 
    position: absolute; 
 
    display: inline-block; 
 
    width: 0; 
 
    height: 0; 
 
    line-height: 0; 
 
    border-top: 3.4482758620689653px solid #ffffff; 
 
    border-bottom: 3.4482758620689653px solid #ffffff; 
 
    border-left: 100px solid #ffffff; 
 
    border-right: 100px solid #ffffff; 
 
    border-radius: 100px/3.4482758620689653px; 
 
    left: 0px; 
 
    top: -4px; 
 
} 
 
#board-cont .border-bottom{ 
 
    position: absolute; 
 
    display: inline-block; 
 
    width: 0; 
 
    height: 0; 
 
    line-height: 0; 
 
    border-top: 3.4482758620689653px solid #ffffff; 
 
    border-bottom: 3.4482758620689653px solid #ffffff; 
 
    border-left: 100px solid #ffffff; 
 
    border-right: 100px solid #ffffff; 
 
    border-radius: 100px/3.4482758620689653px; 
 
    left: 0px; 
 
    bottom: 0px; 
 
}

<div id="board-cont"> 
 
    <div class="border-top"></div> 
 
    <div class="border-bottom"></div> 
 
    <div class="board"></div> 
 
</div>

Answer 4

Như tôi đã nói trong các bình luận, bạn cần phải chặt một số gỗ từ phía trên và phía dưới của bảng. @ Ruddy của hội đồng quản trị trông tốt hơn nhiều mặc dù.

Tôi đã sử dụng các giá trị bán kính siêu cao này vì cách chúng được đo thực tế trên bảng và ván trượt. Sử dụng thông số kỹ thuật snowboard, bạn thực sự có thể đạt được hình dạng/hình dạng giống hệt nhau.

Đó là về xa như bạn có thể nhận được với CSS đồng bằng (với tinh chỉnh các con số, tất nhiên). Nếu bạn cần nó là một đối tượng bán trong suốt để được đặt trên nền (đầy màu sắc) để bạn không thể sử dụng công cụ tẩy trắng, bạn nên sử dụng một khung HTML và một JS đơn giản hơn. .

div { 
 
    display: inline-block; 
 
    padding-top: 10px; 
 
    padding-bottom: 10px; 
 
    padding-left: 10px; 
 
    min-width: 200px; 
 
    border-radius:10%/70%; 
 
    background-color: red; 
 
} 
 
div:before, div:after { 
 
    content: ""; 
 
    background-color: white; 
 
    width: 800px; 
 
    height: 800px; 
 
    display: block; 
 
    border-radius: 800px; 
 
    position: absolute; 
 
    } 
 
div:before { 
 
    margin: -804px 0 0 -307px; 
 
} 
 
div:after { 
 
    margin: 4px 0 0 -307px; 
 
}

<div> 
 
    Board 
 
</div>

Answer 5

Đạt được điều này trong CSS sẽ là một quá trình dài. Bạn có thể sử dụng tập tin SVG lên thay vì:

<svg height="150" width="500"> 
 
<ellipse style="fill:lime" ry="50" rx="109" cy="49" cx="220" /> 
 
<ellipse style="fill:white" ry="73" rx="270" cy="-51" cx="214" /> 
 
<ellipse style="fill:white" ry="73" rx="270" cy="151" cx="214" /> 
 
</svg>