Title in a red background div with bottom arrow also background red and on the bottom list of pictures 3 by 3 all same height and wdith[Answered] RSS

• • Reply
  grafic.web

  Member

  327 Points

  1770 Posts

  Title in a red background div with bottom arrow also background red and on the bottom list of pic...

  Dec 17, 2016 08:30 AM|grafic.web|LINK

  Hi, i am looking to achive in css the following :

  

  I would love on the top a red box with inside a white title adn just on the center bottom of the div a kind of down arrow also in red backround

  and after just above a list of div with backround pictures 3 x3 same size height an width (250 x 250)

  also the picture are link and i was thinking to give a color on hover and put inside them a white title of the picture

  how to achive?

  Your wish is your command!!!
• • Reply
  Cathy Zou

  Star

  8670 Points

  2882 Posts

  Re: Title in a red background div with bottom arrow also background red and on the bottom list of...

  Dec 19, 2016 08:06 AM|Cathy Zou|LINK

  Hi, grafic.web

  Based on your need, I make an sample.

  Following code for your reference:

  <style>
          * {
              padding: 0;
              margin: 0;
          }
  
          .container {
              display: flex;
              justify-content: center;
          }
  
          .TitleDiv {
              position: relative;
              background-color: red;
              height: 50px !important;
              width: 600px !important;
              text-align: center;
              padding-top: 10px;
          }
  
              .TitleDiv:after {
                  z-index: 100;
                  position: absolute;
                  top: 98.1%;
                  left: 50%;
                  margin-left: -10%;
                  content: '';
                  width: 0;
                  height: 0;
                  border-top: solid 35px red;
                  border-left: solid 30px transparent;
                  border-right: solid 55px transparent;
              }
  
          p {
              font-size: x-large;
              word-spacing: 3px;
              color: white;
              letter-spacing: 2px;
              position: relative;
          }
  
          .PictureDiv {
              z-index: 50;
              width: 600px;
              height: 400px;
              background-color: cadetblue;
              margin-top: -3px;
          }
          .PictureTable{
              width:600px;
              height:400px;
              border-collapse:collapse;
          }
          .PictureTable,th,td {
      border: 1px solid black;
  }
         
          .puzzle1 {
              background-image: url(http://www.collectionhair.com/Content/UserCreations/2016-12-05-133958-f9449cea-129-650.JPG);
              width: 199px;
              height: 201px;
              background-position: -200px -100px;
     
          }
  
          .puzzle2 {
              background-image: url(http://www.collectionhair.com/Content/UserCreations/2016-12-06-132109-835d4935-20161203-180733-650.jpg);
              width: 199px;
              height: 201px;
              background-position: -200px -100px;    
          }
  
          .puzzle3 {
              background-image: url(http://www.collectionhair.com/Content/UserCreations/2016-12-13-130604-e2d975b0-sposa-650.JPG);
              width: 199px;
              height: 200px;
              background-position: -200px -100px;      
          }
  
      </style>
  
  
   <div class="container">
              <table>
                  <tr>
                      <td>
                          <div class="TitleDiv">
                              <p>Title To</p>
                          </div>
  
                      </td>
                  </tr>
                  <tr>
                      <td>
                          <div class="PictureDiv">
                              <table class="PictureTable">
                                  <tr>
                                      <td style="width: 20%; height: 200px;">
                                          <div class="puzzle1">
                                          </div>
  
                                      </td>
                                      <td style="width: 20%">
                                          <div class="puzzle2 ">
                                          </div>
  
  
                                      </td>
                                      <td style="width: 20%">
                                          <div class="thumbnail puzzle3 ">
                                          </div>
  
                                      </td>
                                  </tr>
                                  <tr>
                                      <td>Peter</td>
                                      <td>Griffin</td>
                                      <td>af</td>
                                  </tr>
                                  <tr>
                                      <td>Lois</td>
                                      <td>Griffin</td>
                                      <td>aa</td>
                                  </tr>
                              </table>
  
                          </div>
                      </td>
                  </tr>
              </table>
          </div>

  Output as below:

  
  Best Regards

  Cathy

  MSDN Community Support
  Please remember to click "Mark as Answer" the responses that resolved your issue.
  If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.