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

משתדל להיות · 14/12/21

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

varchar · 14/12/21

CSS:

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

משתדל להיות · 14/12/21

נכתב ע"י רחל גוטמן:
CSS:

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

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

פרגית · 14/12/21

תנסה עם before/ after

varchar · 14/12/21

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

CSS:

    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/

רוב · 15/12/21

נכתב ע"י רחל גוטמן:

CSS:

    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

נכתב ע"י משתדל להיות:
כל החלק הלבן צריך להיות שקוף.

משתדל להיות · 15/12/21

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

פרגית · 15/12/21

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

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

משתדל להיות · 15/12/21

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

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

פרגית · 15/12/21

נכתב ע"י פרגית:
עם z-index לגבי מיקומים

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

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

משתדל להיות · 15/12/21

נכתב ע"י פרגית:
זה היה תגובה לזה-

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

פרגית · 15/12/21

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

משתדל להיות · 15/12/21

נכתב ע"י פרגית:
לגבי גובה- מה הבעיה להגדיר גובה?

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

נכתב ע"י רחל גוטמן:
Edit fiddle - JSFiddle - Code Playground

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

jsfiddle.net

Yehuda Kremer · 15/12/21

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

גזעי · 15/12/21

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

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