איך מייצרים div כזה עם CSS

[משתדל להיות]

תוכלו לעזור לי באתגר ?
איך מציירים את ה-div הזה (בלי המסגרת האדומה).
כל החלק הלבן צריך להיות שקוף.
תודה רבה!

 

[varchar]

    border: transparent 20px solid;
    border-top: blue 20px solid !important;

 

[משתדל להיות]

    border: transparent 20px solid;
    border-top: blue 20px solid !important;

התוצאה של זה היא הטרפז הכחול ללא המסגרת הזהב. הקושי שלי היא במסגרת הזהב.

 

[פרגית]

תנסה עם before/ after

 

[varchar]

התוצאה של זה היא הטרפז הכחול ללא המסגרת הזהב. הקושי שלי היא במסגרת הזהב.

    div{
        width: 100px;
        border: transparent 26px solid;
        border-top: red 26px solid !important;
        position:relative;
    }
    div:after{
      content: "";
      border: 20px solid transparent;
      display: inline-block;
      border-top-color: blue;
      position: absolute;
      width: calc(100% - 10px);
      top: -26px;
      left: -15px
    }
    div:before{
      content: "";
      border: 24px solid transparent;
      display: inline-block;
      border-top-color: #fff;
     position: absolute;
      width: calc(100% - 2px);
      top: -26px;
      left: -24px
    }

https://jsfiddle.net/hdcztm18/

 

[רוב]

    div{
        width: 100px;
        border: transparent 26px solid;
        border-top: red 26px solid !important;
        position:relative;
    }
    div:after{
      content: "";
      border: 20px solid transparent;
      display: inline-block;
      border-top-color: blue;
      position: absolute;
      width: calc(100% - 10px);
      top: -26px;
      left: -15px
    }
    div:before{
      content: "";
      border: 24px solid transparent;
      display: inline-block;
      border-top-color: #fff;
     position: absolute;
      width: calc(100% - 2px);
      top: -26px;
      left: -24px
    }

https://jsfiddle.net/hdcztm18/


צפה בקובץ המצורף 1023521

כל החלק הלבן צריך להיות שקוף.

 

[משתדל להיות]

מדהים. תודה רבה!!
עם השקיפות אסתדר כבר, זה לא בוער.
עדיין מתמודד עם הגובה של הdiv כמו"כ עם הסביבה שלו - זה תופס מקום ריק מסביב.
גם אני רוצה להוסיף תוכן לתוך הdiv

 

[פרגית]

מדהים. תודה רבה!!
עם השקיפות אסתדר כבר, זה לא בוער.
עדיין מתמודד עם הגובה של הdiv כמו"כ עם הסביבה שלו - זה תופס מקום ריק מסביב.
גם אני רוצה להוסיף תוכן לתוך הdiv

אפשר להתעסק עם z-index לגבי מיקומים (מי יהיה למעלה וכו)

 

[משתדל להיות]

אפשר להתעסק עם z-index לגבי מיקומים (מי יהיה למעלה וכו)

z-index קובע מיקום רק מבחינת שיכבה - האם יהיה יותר בחזית - בקידמת אלמנט מסויים או מאחורי אלמנט מסויים. לא קשור למיקום שמאל/עליון.
מה גם, שאני ביקשתי התייחסות לגובה הdiv והסביבה שלו. כמו"כ אני רוצה להכניס תוכן לזה.

 

[פרגית]

עם z-index לגבי מיקומים

זה היה תגובה לזה-

כמו"כ עם הסביבה שלו - זה תופס מקום ריק מסביב.

 

[משתדל להיות]

זה היה תגובה לזה-

OK הבנתי.
ומה לגבי הנושאים האחרים - הגובה והתוכן בתוכו ?

 

[פרגית]

תוכן, אולי הייתי שמה בDIV מעל עם רקע שקוף, או שוב בafter
לגבי גובה- מה הבעיה להגדיר גובה?

 

[משתדל להיות]

לגבי גובה- מה הבעיה להגדיר גובה?

בדוגמא שניתן לי, לא הצלחתי להגדיר גובה.

Edit fiddle - JSFiddle - Code Playground

JSFiddle - Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle.

jsfiddle.net

 

[Yehuda Kremer]

הנה עוד פתרון די דומה למה שכבר הציעו, אבל ניתן גם לשנות גובה:
https://codesandbox.io/s/gallant-neumann-19uyd?file=/index.html

 

[גזעי]

אולי כדאי להכיר

shape-outside | CSS-Tricks

The shape-outside property controls how content will wrap around a floated element’s bounding-box. Typically this is so that text can reflow over a shape such

css-tricks.com

 

[משתדל להיות]

הנה עוד פתרון די דומה למה שכבר הציעו, אבל ניתן גם לשנות גובה:
https://codesandbox.io/s/gallant-neumann-19uyd?file=/index.html

מדהים!!!!!!
תודה רבה.

 

[עילום]

Clippy — CSS clip-path maker

bennettfeely.com