Абзац исчез на дне

Если вам нужна диагональная граница вместо диагонального угла, вы можете складывать 2 divs с каждым псевдоэлементом:

DEMO

http: // codepen. io / remcokalf / pen / BNxLMJ

.container {
  padding: 100px 200px;
  overflow: hidden;
}

div.diagonal {
  background: #da1d00;
  color: #fff;
  font-family: Arial, Helvetica, sans-serif;
  width: 300px;
  height: 300px;
  padding: 70px;
  position: relative;
  margin: 30px;
  float: left;
}

div.diagonal2 {
  background: #da1d00;
  color: #fff;
  font-family: Arial, Helvetica, sans-serif;
  width: 300px;
  height: 300px;
  padding: 70px;
  position: relative;
  margin: 30px;
  background: #da1d00 url(http://www.remcokalf.nl/background.jpg) left top;
  background-size: cover;
  float: left;
}

div.diagonal3 {
  background: #da1d00;
  color: #da1d00;
  font-family: Arial, Helvetica, sans-serif;
  width: 432px;
  height: 432px;
  padding: 4px;
  position: relative;
  margin: 30px;
  float: left;
}

div.inside {
  background: #fff;
  color: #da1d00;
  font-family: Arial, Helvetica, sans-serif;
  width: 292px;
  height: 292px;
  padding: 70px;
  position: relative;
}

div.diagonal:before,
div.diagonal2:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  border-top: 80px solid #fff;
  border-right: 80px solid transparent;
  width: 0;
}

div.diagonal3:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  border-top: 80px solid #da1d00;
  border-right: 80px solid transparent;
  width: 0;
  z-index: 1;
}

div.inside:before {
  content: '';
  position: absolute;
  top: -4px;
  left: -4px;
  border-top: 74px solid #fff;
  border-right: 74px solid transparent;
  width: 0;
  z-index: 2;
}

h2 {
  font-size: 30px;
  line-height: 1.3em;
  margin-bottom: 1em;
  position: relative;
  z-index: 1000;
}

p {
  font-size: 16px;
  line-height: 1.6em;
  margin-bottom: 1.8em;
}

#grey {
  width: 100%;
  height: 400px;
  background: #ccc;
  position: relative;
  margin-top: 100px;
}

#grey:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  border-top: 80px solid #fff;
  border-right: 80px solid #ccc;
  width: 400px;
}

Header title

Yes a CSS diagonal corner is possible

Header title

Yes a CSS diagonal corner with background image is possible

Header title

Yes a CSS diagonal border is even possible with an extra div

3
задан SuperDJ 16 January 2019 в 15:45
поделиться

2 ответа

Вы можете использовать ::after или ::before:

p {
  overflow-y: scroll;
  height: 7em;
}

.fadeOut {
  position: relative;
  height: 7em;
}

.fadeOut::after {
  position: absolute;
  content: '';
  display: block;
  height: 1em;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(transparent, white);
}
<div class=fadeOut>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras rutrum vitae urna quis mattis. Cras et dui vulputate, tempus mi tincidunt, finibus leo. Proin magna elit, ultricies vitae tristique eget, luctus vitae sem. Proin massa massa, fermentum sed
    pulvinar a, luctus in ex. Sed consequat nec quam vel semper. Vestibulum mollis, risus ut molestie viverra, turpis purus mollis est, ut venenatis mauris felis nec lectus. Sed vel blandit est, sit amet commodo est. Cras ultrices, ligula quis tincidunt
    accumsan, justo tortor aliquet erat, eget finibus nunc purus nec felis. Integer fringilla, quam et suscipit rutrum, urna nisl efficitur velit, vitae placerat nulla est quis eros. Integer nisl elit, iaculis id laoreet ut, accumsan vel lorem. In scelerisque
    at nulla sed euismod. Aliquam erat volutpat. Praesent non velit ut enim lacinia laoreet non id dolor. Suspendisse ut lectus orci. Aenean neque sem, cursus ornare rutrum a, facilisis vitae magna. Phasellus efficitur sed turpis at mollis. Quisque consequat
    ut risus eu iaculis. Donec nec eros faucibus, bibendum mi in, congue dui. Aenean pretium vehicula velit ac maximus. Curabitur blandit justo ut mi fermentum tincidunt. Aliquam sit amet pellentesque arcu. Suspendisse ultricies, ligula vel iaculis ornare,
    est neque finibus enim, vitae ullamcorper eros erat id mi. Cras rhoncus mauris laoreet commodo porttitor. Sed pretium, nibh vitae maximus ultrices, dui purus finibus mauris, nec ultrices neque lectus eu justo. Sed vitae metus nunc. Vestibulum laoreet
    sed metus ut porta. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque libero est, interdum ut sem nec, pellentesque tincidunt diam. Praesent felis est, molestie vel dui et, commodo auctor sapien. Nam
    tortor purus, egestas in porttitor id, posuere vel metus. Nullam feugiat imperdiet mauris nec vehicula. Praesent iaculis est sed lacinia lacinia. Etiam iaculis nibh in arcu efficitur, sit amet lacinia ligula porta. Vivamus varius lacinia magna. Praesent
    imperdiet velit ac nulla pulvinar, sit amet rhoncus felis mattis. Ut condimentum eu ligula vitae efficitur. Nunc finibus sapien id ipsum imperdiet cursus. Mauris vel nunc a ex feugiat condimentum sit amet at dolor. Nulla nulla leo, hendrerit quis
    velit at, eleifend placerat diam. Proin efficitur ligula ut lacus blandit ornare. Fusce ultricies diam nec lobortis feugiat. Sed ut orci posuere, ultricies lectus a, porttitor libero. In sagittis tellus euismod, faucibus libero eu, molestie sapien.
    Phasellus sed ipsum molestie, gravida tortor eget, sodales neque. Fusce elementum ligula tristique, auctor neque sit amet, dapibus turpis. Nullam in diam facilisis, dignissim magna et, convallis purus. Pellentesque sodales ligula id nisi ullamcorper,
    id euismod mauris rutrum. Donec venenatis erat eu dui placerat porttitor. Praesent vulputate ultrices erat, id tristique lorem varius ultricies. Morbi nec sem eget nibh bibendum vestibulum non vel ipsum. Donec eget quam justo. Ut nisl orci, gravida
    at pulvinar sed, suscipit ac orci. Etiam ante nunc, commodo ut condimentum non, iaculis semper dolor. Donec mauris libero, tempor at odio non, scelerisque suscipit odio. Ut eget finibus urna. Mauris quis mollis orci, eget dictum lectus. Morbi nec
    massa fermentum, faucibus sapien a, condimentum leo. Vestibulum laoreet dictum enim in imperdiet. Vivamus commodo leo elementum libero mattis, in sodales arcu pretium. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos
    himenaeos. Integer a molestie nibh. Etiam quis justo sed ante volutpat iaculis sed nec enim.
  </p>
</div>

0
ответ дан jiwopene 16 January 2019 в 15:45
поделиться

Небольшое изменение таблицы стилей сделало это для меня. Вы хотите, чтобы p прокручивал, а не контейнер.

.container{
      position:relative;
      width:300px;
      max-height:100px;  
    }
    .container p {
      overflow-y:scroll;
      max-height:100px;
    }
    .container:after{
      content:"";
      position:absolute;
      z-index:1;
    	bottom:0;
    	pointer-events: none;
    	background-image: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255, 1) 90%);
    	width: 100%;
    	height: 4rem;
    }
<div class="container">
  <p>
   Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. 
  </p>
</div>

0
ответ дан FZs 16 January 2019 в 15:45
поделиться
Другие вопросы по тегам:

Похожие вопросы: