प्रौद्योगिकी साझेदारी

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

1. समलम्बं आकर्षयितुं सीमायाः उपयोगं कुर्वन्तु (सामग्री सर्वथा स्थापनस्य आवश्यकता वर्तते)

एचटीएमएल : १.

//左边斜边
<div class="t">
    <div class="f"></div>
</div>
//右边斜边
<div class="t2">
    <div class="f"></div>
</div>

CSS: .

.t{
    position: relative;
    width: 277.5px;
    height: 35px;
    border-right: 19px solid transparent;
    border-bottom: 35px solid #4B75FF;
}
 
.f{
    position: absolute;
    bottom: 0;
}
.t2{
    position: relative;
    width: 277.5px;
    height: 35px;
    border-left: 19px solid transparent;
    border-top: 35px solid #4B75FF;
}

परिणाम:

2. समलम्बं आकर्षयितुं clip-path इत्यस्य उपयोगं कुर्वन्तु

एचटीएमएल : .

<div class="card-info_s3-bottom_cc_left">
</div>

CSS: ९.

.card-info_s3-bottom_cc_left{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    font-size: 13px;
    color: #ffffff;
    width: 277.5px;
    height: 35px;
    padding-left: 26px;
    clip-path:polygon(0 0,258.5px 0px,277.5px 35px,0px 35px);
    background-color: #4B75FF;
    border-bottom-left-radius: 12px;
    border-top-right-radius: 30px;
}

परिणाम:

विस्तारः क्लिप्-मार्गः

clip-path विशेषतायाः उपयोगः कस्यचित् तत्त्वस्य clipping क्षेत्रं परिभाषितुं भवति यत् के भागाः दृश्यन्ते, के भागाः गुप्ताः इति नियन्त्रयितुं । एतत् भवन्तं भिन्न-भिन्न-फंक्शन्-पैरामीटर्-इत्यस्य उपयोगेन जटिल-सस्य-आकारं निर्मातुं शक्नोति । CSS मध्ये clip-path गुणः clipping क्षेत्रं परिभाषितुं भिन्नानि कार्याणि उपयोक्तुं शक्नोति । सामान्यतया प्रयुक्तानि कार्याणि निम्नलिखितरूपेण सन्ति ।

1. circle(): एकं वृत्ताकारं सस्यक्षेत्रं रचयन्तु। मापदण्डाः वृत्तस्य केन्द्रस्य त्रिज्या, निर्देशांकाः च भवन्ति ।
2. ellipse(): एकं दीर्घवृत्तीयं क्लिपिंग् क्षेत्रं रचयन्तु। मापदण्डाः क्षैतिज-लंब-अक्षयोः त्रिज्या, वृत्तस्य केन्द्रस्य निर्देशांकाः च सन्ति ।
3. polygon(): बहुभुजं क्लिपिंग् क्षेत्रं रचयन्तु। पैरामीटर् बहुभुजं निर्मायन्ते ये शिखराः तेषां निर्देशांकाः सन्ति ।
4. path(): सस्यक्षेत्रं परिभाषितुं SVG path इत्यस्य उपयोगं कुर्वन्तु । तर्कः मार्गस्य स्ट्रिंग् प्रतिनिधित्वम् अस्ति ।