3

Quisiera obtener el resultado de la imagen. He aplicado border radius pero no obtengo el mismo resultado.

Lo que tengo de momento:

.borde{
  width:400px;
  height:400px;
    border-top: 2px solid #e33d49;
    border-radius: 6px 6px 6px 6px;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
    border-bottom-left-radius: 6px;
    border-bottom: 2px solid #e33d49;
  margin: 0 auto;
}
<div class="borde">
</div>

Quisiera que los bordes sean como en la siguiente imagen:

QUISIERA QUE QUEDEN ASÍ LOS BORDES

2 respuestas 2

2

Espero que te sirva...:

body {
    padding: 20px;
}

div {
    font-size: 7em;
    width: 282px;
    height: 260px;
    color: red;
    text-align: center;
    background-color: white;
    position: relative;
}

div::before {
    display: block;
    content: ' ';
    width: 280px;
    height: 282px;
    position: absolute;
    top: -10px;
    left: 0;
    z-index: -1;
    border: 1px solid red;
    background-color: white;
}
<div>96<br>Días</div>

3
  • Excelente! Nunca me lo espera de esa manera.
    – Einer
    el 19 jul. 2017 a las 20:52
  • @Einer - El tuyo hace lo mismo.. solo con un poco más de código :) el 19 jul. 2017 a las 20:54
  • 1
    Un poco? Tiene una diferencia abismal!
    – Einer
    el 19 jul. 2017 a las 20:55
1

Poniendo 2 div con el mismo background que el cuadro. 1 div en cada lado y asi parecera que esta cortado:

.numero{
  padding:10px 20px;
  border:red solid 1px;
  display:inline-block;
  position:relative;
  background:white;
  font-weight:bold;
  font-family:Helvetica;
  text-align:center;
  color:red;
}
.numero .text{
  font-size:50px; 
}
.numero .sub-text{
  font-size:14px; 
}
.numero .border-left{
position: absolute;
    width: 2px;
    height: 90%;
    border-radius: 10px;
    background: #fff;
    left: -1px;
    top: 0px;
    margin-top: 5px;
    z-index: 1;
}

.numero .border-right{
  position:absolute;
  width:2px;
  height:90%;
  border-radius:10px;
  background:white;;
  right:-1px;
  top:0px;
  margin-top:5px;
}
  <div class="numero">
    <div class="border-left">
    </div>
    <div class="text">
      <div>
        96
      </div>
      <div class="sub-text">
        Días
      </div>
    </div>
    <div class="border-right"></div>
  </div>

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.